包含浮动<li> </li> </ul>时的<ul>高度

Question

我有一个清单：

<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;
}

我该怎么做？列表中的项目数可能不同，因此我无法使用固定高度。

Answer 1

包含花车的好选项：

• 将overflow: hidden添加到ul。
• 使用clearfix。

Answer 2

这不是您问题的直接答案，但作为替代方案，您可以考虑使用display:inline-block吗？这些天我只是在可能的情况下使用它而不是float，因为在大多数情况下它可以实现相同的目标而不会让容器正确地包含内部浮动元素并且必须clear他们一直都是。

Answer 3

测试它：

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

为元素添加类，不要对所有元素执行此操作。

Answer 4

在这里，我提出了处理这种情况的最简单方法之一。

如果我们有一些替代方案，那么左手总会有一些反应并且不好用。

替代方案是：

li { display:inline-block; }

无需添加额外的代码，例如float：left和overflow：hidden：）