0

ナビゲーション オブジェクトが 5 つある場合は正常に表示されるナビゲーション バーがありますが、さらに 3 つ追加するとメイン ヘッダーの下に表示されるのはなぜですか?

5 つのオブジェクト:

ここに画像の説明を入力

7 つのオブジェクト:

ここに画像の説明を入力

HTML:

<div id="header">
    <div class="w960">
        <div id="logo">
            <h2>Text</h2>
            <p>Text</p>
        </div>
        <nav>
            <ul>
                <li class="first active">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4 </a>
                </li>
                <li class="last">
                    <a href="#">5</a>
                </li>
            </ul>
        </nav>
    </div>
</div><!-- end of header -->

</p>

CSS:

#header{background:#2d2d2f;width:100%; height:120px;clear:both;font-family:Signika,Arial,sans-serif;}

.w960 { width:960px; margin:auto; }

nav{width:auto; float:right;line-height: 50px;}
nav ul li{font-size:14px; float:left;display: inline-block;padding: 0px 11px;text-transform:uppercase;}
nav ul li a{padding: 0px 10px; color:#ffb400; text-decoration:none;}
nav ul li a:hover, .active a{color:#fff}

#logo{width: 40%;float: left;height: 90px;}
#logo h2{line-height: 41px;color:#FFB400;font-size:28px;}
#logo h2 span{color:#FFB400;}
#logo p {margin-top: -25px;color:#b8bbbc;}
4

4 に答える 4

1

同じ行に2つのフローティング要素があり、両方の幅の合計が使用可能なスペースよりも大きい場合、それらはラインを分割し、2番目のフローティング要素を前の要素の下に配置します。この場合はロゴの下に移動します。それぞれに境界線を追加すると、大きすぎることがわかります。

1つの代替手段はこれです：http：//jsfiddle.net/Bs93k/

nav{width:auto; /*float:right;*/ overflow:auto; line-height: 50px;}

これにより、navは使用可能なスペースを使用できるようになりますが、その内容が希望どおりに動作するとは思いません。

2番目の選択肢はこれです：http：//jsfiddle.net/PU7hV/

#header{display:table;}
.w960 {position:relative;}
nav{/*float:right;*/ position:absolute; top:0; right:0;}

私はあなたが追加しなければならないものを書き、何を削除するかについてコメントしたことに注意してください、残りはあなたがすでに持っていたままにしておきます。

于 2012-10-18T23:39:18.510 に答える
1

ヘッダー コンテナーの背景がリンクの背後に表示されない理由を尋ねるつもりなら、それは float が原因ですli。

clearfixクラスを追加する必要があります。

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

そして、そのクラスをヘッダーに適用します。

<div id="header" class="clearfix">

なぜ行が分割されるのかというと、それは<div class="w960">コンテナーの幅が固定されているためです。

.w960 { width:960px; margin:auto; }
于 2012-10-18T23:11:32.683 に答える
0

HTML を変更できない場合 (たとえば、HTML を出力するスクリプトにアクセスできない場合)、clearfix を追加すると、次のように CSS を変更できます。

#header {
    background: none repeat scroll 0 0 #2D2D2F;
    clear: both;
    float: left;
    font-family: Signika,Arial,sans-serif;
    height: auto;
    width: 100%;
}
于 2012-10-18T23:23:05.007 に答える
0

ドロップダウン サブメニューがない限り、overflow: hidden を使用することをお勧めします。

nav ul {
    overflow: hidden;
}
于 2012-10-18T23:17:14.117 に答える