0

我试图让我的导航栏扩展到 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;
}
4

2 回答 2

0

看来您缺少容器的关闭 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">

应该解决您的问题

于 2013-01-16T15:31:59.523 回答
0

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

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

于 2013-01-16T16:19:36.640 回答