流体布局中的页眉定制

Question

我正在做这个项目组合项目，我感到有点困惑。

我希望我的标题div粘贴在页面顶部，宽度为100％。但是在代码中它会干扰包装，我无法找到问题。下面是代码：

<header class="wrapper clearfix"> 

    <div id="banner">   
     <div id="logo"><a href="basic.html"><img src="images/web.png" alt="logo"></a></div> 
    </div> 

    <!-- main navigation --> 
    <nav id="topnav" role="navigation"> 
     <div class="menu-toggle">Menu</div> 
     <ul class="srt-menu" id="menu-main-navigation"> 
      <li class="current"><a href="basic.html">Home page</a></li> 
      <li class="current"><a href="basic.html">Home page</a></li> 
      <li class="current"><a href="basic.html">Home page</a></li> 
      <li class="current"><a href="basic.html">Home page</a></li> 
      <li class="current"><a href="basic.html">Home page</a></li> 
     </ul>  
    </nav><!-- end main navigation --> 
</header> 

这里是CSS：

.wrapper{ 
    width: 92%; 
    margin: 0 auto; 
} 

如果我从头类.wrapper删除。横幅贴在顶部，宽度为100％，但是我无法设置标识和菜单的正确对齐方式，只是左右贴合。我希望它们与其他内容垂直对齐。

Answer 1

删除.wrapper类，就像你做的一样，但添加一个包装你的横幅和导航的.inner'div'，并给它的宽度：92％和margin：0 auto; ....像这样：

<header> 
    <div class="wrapper clearfix"> 
     <div id="banner">   
      <div id="logo"><a href="basic.html"><img src="images/web.png" alt="logo"></a></div> 
     </div> 

     <!-- main navigation --> 
     <nav id="topnav" role="navigation"> 
     <div class="menu-toggle">Menu</div> 
      <ul class="srt-menu" id="menu-main-navigation"> 
      <li class="current"><a href="basic.html">Home page</a></li> 
         <li class="current"><a href="basic.html">Home page</a></li> 
           <li class="current"><a href="basic.html">Home page</a></li> 
              <li class="current"><a href="basic.html">Home page</a></li> 
                <li class="current"><a href="basic.html">Home page</a></li> 

     </ul>  
     </nav><!-- end main navigation --> 
    </div> 
</header>