2

重複の可能性：
divの高さを合わせて、浮いた子をラップする方法

浮いたものがたくさん入った<ul>中身が欲しいです。唯一の問題は、含まれているものが0pxの高さに折りたたまれるということです。まるでそれが含まれているかのようにその高さを維持するにはどうすればよいですか？<div><li><div><div><li>

HTML：

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
</div>

CSS：

div {
background: rgb(90, 90, 90);
}

ul {
color: red;
}

li {
float: left;
clear: none;
margin-right: 10px;
}

フロートの使用が古風で、より良いスタイルを知っている場合は、私に知らせてください！

4

4 に答える 4

2

オプション1（推奨）：overflow:hidden;高さを修正するdivスタイルを指定します。

オプション2：または、現在のdivの最後に明確なdivを追加します

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
   </ul>
   <div style="clear:both;"> </div>
</div>

jsFiddleデモ

編集：明確にするために、上記の両方が完全なクロスブラウザサポートを備えており、ハックや無効なCSSを必要としません。

于 2012-12-07T07:10:02.560 に答える
2

試すDisplay:inline-block;

li {
display:inline-block;
    margin-right: 10px;
}

デモ

クロスブラウザインラインブロック

于 2012-12-07T07:10:25.167 に答える
0

正確な問題を解決するには：

div {
    background: rgb(90, 90, 90);
    overflow: auto;
}

たぶん、あまり「昔ながらの」方法ではありません。

div {
    background: rgb(90, 90, 90);
}
ul {
    color: red;
}
li {
    display: inline-block;
    *vertical-align : auto;
    *display: inline; // targets IE7 and such, same effect
    margin-right: 10px;
}

正確な仕様に一致するように、li要素のマージンを調整する必要があります。フロートを使用するのはまだクールですが、なぜ表示するときにわざわざ：インラインブロックはあなたが望むもののほとんどを解決しますか？

PS：IEのハッキングは問題ない場合があります。SassのようなプリプロセッサとCompassのようなライブラリを使用して、それらを管理することをお勧めします。

この問題に関するいくつかの記事：

于 2012-12-07T07:14:36.800 に答える
0

プロパティを使用しているときはいつでも、プロパティもFLOAT追加することを忘れないでくださいclear

あなたはこれを試すことができます

<div>
   <ul>
      <li>stuff</li>
      <li>morestuff</li>
      <li style="clear:both;float:none"></li>    <!-- Added Clear, removed float -->       
   </ul>
</div>​​​​​​​​​​​​​​​​
于 2012-12-07T07:32:41.777 に答える