web-dev-qa-db-ja.com

<ul>フローティング<li>を含む場合の高さ

リストがあります：

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
</ul>

すべての<li>はフローティングです。 <ul>ボックスの高さが必要です。私が正しく覚えている場合、これは無効です。

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
 <hr class="clear" />
</ul>

.clear {
   clear: both;
}

これどうやってするの？リスト内のアイテムの数は異なる可能性があるため、固定の高さを使用することはできません。

htmlcsshtml-listscss-float
31
tsusanka

フロートを含めるための適切なオプション：

60
thirtydot

これはあなたの質問に対する直接的な答えではありませんが、代わりにdisplay:inline-block？最近では、可能な限りfloatの代わりにそれを使用します。ほとんどの場合、コンテナに内部浮動要素を適切に含めることとclearそれらは常に。

3
Trevor

ここでは、このような状況を処理する最も簡単な方法の1つを紹介します。

残っているフロートには常に何らかの反応があり、代替手段がある場合は使用するのは良くありません。

代替手段は次のとおりです。

li { display:inline-block; }

Float：leftやoverflow：hiddenのような特別なコードを追加する必要はありません:)

1
Husen

試して：

ul { overflow: hidden; }
li { float:right; display:block; }

クラスを要素に追加します。すべての要素に対してこれを実行しないでください。

1
ali youhannaei