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

应该解决您的问题

Answer 2

我希望这个解决方案有所帮助。红色边框是容器边界。告诉我，如果我误解了一些事情。

JSBin链接：http://jsbin.com/oludot/1/edit

960网格系统导航栏问题

2 个答案: