[英]Wordpress Body Above Header when it should be Inline
這是一個Codepen,用於查看我編寫和工作的代碼。
當我在wordpress主題中編寫類似的代碼時,我的身體出現在標題上方。 如何獲得標頭旁邊的主體?
[BONUS]什么是在頁眉的右邊緣和屏幕的右側之間居中對齊主體的最佳方法/方法。
任何建議都將受到高度贊賞,在此先感謝您。
[編輯]:我更改了我的wordpress網站的代碼,因為像我在Codepen中一樣,在使用CSS定位body之前,但是我創建了一個.class類的div並將其用作body。 這是一個臨時修復程序,但可以按預期運行。 我如何更好地實現這種影響,以便可以集成可視化插件構建器(例如beaver構建器)?
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 -->
問題的部分原因是我的functions.php中出現了php錯誤。 另外,我將網站內容的位置更改為絕對位置,並將網站導航更改為固定位置。 然后,我設置邊欄導航的寬度和站點內容。 我還在標題中添加了內容循環以創建內容區域。 網站導航和內容均以內聯塊顯示。
現在一切似乎都正常了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.