web-dev-qa-db-ja.com

floatcss後のDivの崩壊

私はNAVと呼ばれるdivを持っていて、NAVの中に5 liのULがあり、それを左にフロートさせています。liはそうですが、そうすると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;
}
htmlcssxhtmlcss-float
18
user36682

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

div#nav { overflow:auto; }

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

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

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>

これにより、包含要素は、包含ボックスを閉じる前にすべてのフローティング要素をクリアします。

15
Abram Simon

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

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

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

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

5
seanb

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

<div style="clear: both"></div>
4
Joshua Brickner

含まれている要素も左にフロートさせてみてください。

2
dylanfm

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

#nav {
    float: left;
}

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

（また、＃nav divを削除し、同じスタイルをULに適用することも検討してください。）

2
Doug

問題は、<A>要素をフローティングしているが、それぞれが<LI>要素内にあるためです。 LIsはデフォルトでブロックとして表示されるため、各<LI>は子<A>を改行で開始するように強制します。

<LI>sをフロートさせれば、問題は解決すると思います。

#nav #ulListNavi  li  {
    float: left;
}
2
Mark Nielsen

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

#nav{overflow:hidden;}
1
Rima Gerhard

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およびFF3.5で動作します

0
Chris