0

ナビゲーションバーを16列グリッドのコンテナ全体に拡張しようとしています。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 に答える