HTML/CSS：奇怪位置的DIV開始

在這個JSFiddle，爲什麼nav#nav-header-menu從屏幕頂部開始？HTML/CSS：奇怪位置的DIV開始

在HTML中，它在div#header-right之後開始。

的原因，我想問的是，我想向上（margin-top: -2em;）移動nav#nav-header-menu使標誌位於兩個水平邊界之間，就像這樣：

的的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:[email protected]" 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:[email protected]" title="Email Us">[email protected]</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 &amp; 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">

幫助表示讚賞。

來源

2017-02-24 Steve

添加'.container {溢出：隱藏;}' –

謝謝@MuhammadUsman，這有助於，但'＃資產淨值NAV-頭，menu'還開始在屏幕的頂部，我不理解。 – Steve

您有一些負利差。刪除或重置它'＃nav-header-menu {margin-top：0}'。 –

這是因爲div#header-right有一個float屬性設置它。當某些東西浮動時，它將從HTML的正常靜態呈現上下文中取出，這會呈現一個元素。請點擊這裏查看Layouts with float and clear。

您可以嘗試的是將徽標從nav容器中取出，並將header-left,header-right和您的徽標全部放在同一個容器中。這是總體思路......你覺得怎麼樣？

<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 */; 
}

來源

2017-02-24 08:11:45

HTML/CSS：奇怪位置的DIV開始

回答

相關問題