html - float css 後の div の崩壊

Question

私は NAV と呼ばれる div を持っており、NAV の内部には 5 つの li を持つ UL があり、左にフロートしています。これは、NAV が崩壊するかどうかを確認するために NAV の周りに境界線を置いているためです。これが例です。

折りたたまれた http://img401.imageshack.us/img401/8867/collapsedze4.png

折りたたまれていません http://img71.imageshack.us/img71/879/nocollapsedkx7.png

最初の画像でわかるように、NAV div のリンクは左に浮いており、その上の黒い境界線は NAV と呼ばれる実際の div です。

この画像では、上下の境界線があり、折りたたまれていないことがわかります。

ここに私が使用したhtmlとcssの一部があります。

代替テキスト http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

score 37 · Accepted Answer

overflowコンテナー以外の値を追加visibleします。

div#nav { overflow:auto; }

次に、追加widthして幅を復元します

div#nav { width: 100%; overflow:auto; }

score 15 · Accepted Answer

解決策の 1 つは、要素の最後のフローティングアンカーの後に「clear:both」スタイルを追加することです。次に例を示します。

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

これにより、包含要素は、包含ボックスを閉じる前にすべての浮動要素をクリアします。

score 5 · Accepted Answer

ここでフロートをクリアするためのいくつかの他のオプション:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

それを行う最善の方法については、それはほとんど聖戦です。純粋主義者は余分な div に夢中になるでしょう。少し余分なマークアップに悩まされていなければ、Joshua と AJ によって提案されたクリアされた div の追加はうまくいきます、信頼できる手法ですが、他に少なくとも 17 の方法があります...

score 4 · Accepted Answer

4

ul の後に次のコードを追加します。

<div style="clear: both"></div>

于 2008-12-16T04:12:01.020 に答える

score 2 · Accepted Answer

要素のクリアやオーバーフローを気にしないでください。これを追加：

#nav {
    float: left;
}

LI をフロートすると、#nav は何も「含まない」ため、折りたたまれます。ただし、#nav もフロートされている場合は、その中にフロートされているものが含まれているため、再び展開されます。

(#nav div を削除して、同じスタイルを UL に適用することも検討してください。)

score 2 · Accepted Answer

2

包含要素も左に浮かせてみてください。

于 2008-12-16T04:08:40.887 に答える

score 1 · Accepted Answer

最も簡単な解決策は、overflow：hiddenを追加して、親要素のfloatをクリアすることです。

#nav{overflow:hidden;}

score 0 · Accepted Answer

HTML を変更せずに:

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

IE8 および FF 3.5 で動作

html - float css 後の div の崩壊

9 に答える 9

Related

Reference