HTML/CSS：奇数位置でのDIVの開始

このJSFiddleで、nav#nav-header-menuが画面の先頭から始まるのはなぜですか？HTML/CSS：奇数位置でのDIVの開始

HTMLでは、div#header-rightの後に開始されます。

私が尋ねる理由は、私が上向きにnav#nav-header-menu（margin-top: -2em;）を移動したいですロゴは、このような二つの水平の境界線の間に座っているように：

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 {オーバーフロー：隠された;}追加助けが、' NAV番号NAV-ヘッダmenu'はまだ私はないれ、画面の上部から始まり ' –

おかげ@MuhammadUsmanをわかる。 – Steve

マイナスのマージンがあります。 '＃nav-header-menu {margin-top：0}'も削除またはリセットしてください。 –

div#header-rightにはfloatプロパティが設定されているためです。浮動小数点数が浮動小数点数になると、HTMLの通常の静的レンダリングコンテキストから取り出され、1つの要素を別の要素にレンダリングします。 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の開始

答えて

関連する問題