Question

在此JSFiddle，为什么nav#nav-header-menu从屏幕顶部开始？

在HTML中，它在div#header-right之后启动。

我问的原因是我想向上移动nav#nav-header-menu（margin-top: -2em;），以便徽标位于两个水平边框之间，如下所示：

JSFiddle最适合宽窗口宽度。

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 &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">

帮助表示赞赏。

Answer 1

这是因为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 */;
}

HTML / CSS：在奇数位置开始DIV

1 个答案: