在此JSFiddle ，为什么 nav#nav-header-menu 从屏幕顶部开始？
在 HTML 中，它在 div#header-right 之后开始。
我问的原因是我想向上移动 nav#nav-header-menu (margin-top: -2em;) 以便 Logo 位于在两个水平边框之间，像这样:
JSFiddle 在较宽的 HTML 窗口宽度下效果最佳。
HTML:
<body>
<div class="site-container">
<header class="site-header" itemscope="" itemtype="http://schema.org/WPHeader">
<div class="wrap">
<div class="container">
<div id="header-left">
<p><a href="mailto:contact@vmpersonal.com" title="Email Us"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/email.png" alt="Email Us" title="Email Us"></a> <a href="mailto:contact@vmpersonal.com" title="Email Us">contact@vmpersonal.com</a> </p>
</div>
<div id="header-right">
<p><span id="social"><a href="#" title="Watch us on YouTube"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/youtube.png" alt="Watch us on YouTube" title="Watch us on YouTube"></a> <a href="#" title="Follow us on Facebook"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/facebook.png" alt="Follow us on Facebook" title="Follow us on Facebook"></a> <a href="#" title="Follow us on Instagram"><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/insta.png" alt="Follow us on Instagram" title="Follow us on Instagram"></a></span> <span id="user"><a ref="http://vmpersonal.com/wp-login.php" title="Sign In to VM Personal">Sign In</a> / <a href="http://vmpersonal.com/wp-login.php?action=register" title="Register for an account on VM Personal">Register</a></span></p>
</div>
<nav id="nav-header-menu">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="genesis-nav-menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item menu-item-104"><a href="http://vmpersonal.com/" itemprop="url">Home</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="/shop" itemprop="url">Products & Services</a></li>
<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://vmpersonal.com/blog/" itemprop="url">Blog</a></li>
<li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-110" style="display: none;"><a href="/" itemprop="url">Logo</a></li><img src="http://vmpersonal.com/wp-content/themes/genesis-sample/images/logo.png" width="124px">
<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://vmpersonal.com/success-stories/" itemprop="url">Success Stories</a></li>
<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://vmpersonal.com/about/" itemprop="url">About</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://vmpersonal.com/contact/" itemprop="url">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</div>
</body>
CSS:
<link rel="stylesheet" type="text/css" href="https://vmpersonal.com/wp-content/themes/genesis/style.css">
<link rel="stylesheet" type="text/css" href="https://vmpersonal.com/wp-content/themes/genesis-sample/mhm-style.css">
感谢帮助。
最佳答案
这是因为 div#header-right 设置了一个 float 属性。当某物 float 时，它会脱离 HTML 的正常静态渲染上下文，HTML 会一个接一个地渲染元素。查看Layouts with float and clear这里。
您可以尝试将 Logo 从 nav 容器中取出并制作 header-left、header-right 和您的 Logo 都在同一个容器中。这是总体思路……您怎么看？
<header class='container'>
<div class='header-left'></div>
<!-- put your logo here -->
<div class='header-right'></div>
</header>
<nav class='container'>
<div class='nav-items-left'></div>
<div class='nav-spacer'></div>
<div class='nav-items-right></div>
</nav>
header {
max-height: /* desired height */;
overflow: visible;
}
.header-left,
.header-right,
.your-logo,
.nav-items-left,
.nav-items-right,
.nav-spacer {
display: inline-block;
vertical-align: top;
}
.nav-spacer {
width: /* same width as your logo */;
}
.your-logo {
width: /* width of your logo */;
}
关于css - HTML/CSS : Start of DIV at an odd position，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42433516/