html - 960网格系统导航栏问题

Question

我正在尝试让我的导航栏扩展到 16 Column Grid 的整个容器。在 Chrome 中并没有一直延伸。在 Firefox 中，它看起来很奇怪。这告诉我我正在以某种方式打破网格。有人可以帮忙吗？这是我的代码:

<div class="container_16" id="container">
    <div class="grid_16" id="header image">
        <img src="img/condley-employees.png" />
    </div><!-- end of header image -->
    <div class="clear"></div>

    <div class="container_16 clearfix" id="main-nav" align="center">
        <ul>
            <li><a href="#">HR</a></li>
            <li><a href="#">Departments</a></li>
            <li><a href="#">Employee Fun</a></li>
            <li><a href="#">Marketing</a></li>
            <li><a href="#">Calenders</a></li>
            <li><a href="#">Misc.</a></li>
        </ul>
    </div><!-- end of navigation -->

CSS:

#main-nav ul {
    margin: 3px;
    padding: 0;
    list-style: none;
    width: 940px;
}

#main-nav li { 
    display: inline;
}

#main-nav li a { 
    text-decoration: none;
    padding: 5px 0;
    width: 150px;
    background: #006699;
    color: #eee;
    float: left;
    text-align: center;
    border-left: 1px solid #fff;
}

Answer 1

看来您缺少容器的结束 div

  </div><!-- end of container-->

因此，您将容器嵌套在容器中。

您还应该添加一个 grid_16给你上课 #main-nav ul并且没有指定高度。

您应该阅读一些关于使用网格系统的资源:

http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/

---

更新:

改变

<div class="container_16 clearfix" id="main-nav" align="center">

到

<div class="grid_16 clearfix" id="main-nav" align="center">


应该可以解决您的问题