Question

我如何能够在此测试站点上导航深灰色条（标题）的整个高度，并垂直居中？ http://website-test-lab.com/sites/mfm/

您可以看到主页链接的红色背景未填充深灰色条形区域高度。包含菜单的网站是响应式的。

编辑：对缺乏代码示例感到抱歉，但是在这里添加了太多的CSS或者例如jsfiddle。如果您可以使用非常感谢的Dev Tools / Firebug。

感谢。

HTML：

<header id="masthead" class="header clearfix" role="banner">

<!-- logo -->
  <div class="logo grid-15 tablet-grid-15">
   <a href="#">
    <img src="#/library/img/mfmlogo.jpg" alt="#" class="logo-img">
   </a>
  </div>
<!-- /logo -->

<!-- nav -->
  <nav id="header-menu" class="nav grid-85 tablet-grid-85" role="navigation">
    <ul class="nav-list clearfix">
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-32 current_page_item menu-item-46"><a href="http://website-test-lab.com/sites/mfm/">Home</a></li>
      <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://website-test-lab.com/sites/mfm/about-us/">About Us</a></li>
</ul>
  </nav>
<!-- /nav -->

</header>

CSS：

#masthead {
    margin: 15px 0 0 0;
    background: #363737;
    position: relative;
    display: block;
}

.logo {
    padding: 10px;
}

Answer 1

将.nav的margin-top设置为 #masthead .nav{ margin-top:0px; }

并设置填充类似 #masthead .nav ul li a{ padding:31px 15px; }

使导航全高

1 个答案: