html - 流畅布局中的标题自定义

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

如果我从 header 类中删除 .wrapper 。横幅贴在顶部，宽度为 100%，但后来我无法将 Logo 和菜单正确对齐，它们只是贴在左右两侧。我希望它们与其他内容垂直对齐。

Answer 1

像你一样删除 .wrapper 类，但添加一个 .inner 'div' 来包装你的横幅和导航，并给它 width: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>