Wordpress Body Header當它應該是內聯的

這裏是一個codepen看到我寫的代碼和工作。Wordpress Body Header當它應該是內聯的

當我在wordpress主題中編寫類似的代碼時，我的身體出現在標題上方。我怎樣才能得到標題旁邊的身體？

[BONUS]什麼是最好的方法/如何對齊標題右邊緣和屏幕右側之間的身體。

任何意見是高度讚賞，我感謝你提前。

[編輯]：我改變了我的wordpress網站的代碼，因爲之前我是用css來定位body的，就像我在codepen中做的那樣，但是我創建了一個class爲.site的div，並使用它作爲body。這是一個臨時解決方案，但它按預期工作。我怎麼能更好地實現這種影響，所以我可以集成海狸生成器等可視化插件構建器？

HTML：

<div id="header"> 
    <img src="http://placehold.it/100x100"> 

    <ul id="nav"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item Number 3</li> 
     <li>Item #4</li> 
    </ul> 

</div> 
<div id="body"> 
    <div id="container">Body 
    </div> 
    </div> 

</div>

CSS：

#header, 
#body { 
    display: inline-block; 
} 

#header { 
    white-space: nowrap; 
    width: 15%; 
    height: 100%; 
    float: left; 
    text-align: right; 
    position: fixed; 
    //border: 1px solid green; 
} 

#header img { 

} 

#nav ul { 
    list-style: none; 
} 
#nav { 
    position: absolute; 
    bottom: 4%; 
    right: 0; 
} 

#body { 
    width: 80%; 
    float: right; 
    //border: 1px solid yellow; 
} 

#container { 
    height: 10000px; 
}

的header.php：問題的

<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" /> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <meta name="viewport" content="width=device-width"> 
    <title><?php bloginfo('name'); ?></title> 
     <?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 

    <!-- Site Header --> 
<header class="site-header"> 
    <?php the_custom_logo(); ?> 
     <?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?> 
</header> 
    <!-- /Site Header --> 

<!-- Site Content -->

來源

2016-08-03 ERIC

可能是中心元素標題和正文的一種方式？ – ERIC

部分原因是，我在我的functions.php有一個PHP錯誤。此外，我將網站內容的位置更改爲絕對值，將網站導航更改爲固定值。然後我設置邊欄導航和網站內容的寬度。我還爲我的標題添加了一個內容循環來創建內容區域。網站導航和內容都以內嵌塊顯示。

現在一切似乎都在工作。

來源

2016-08-04 04:11:45 ERIC

Wordpress Body Header當它應該是內聯的

回答

相關問題