Question

我感到困惑的是，将float应用于li元素似乎意味着包含ul元素没有高度。您可以看到问题in this jsFiddle。

基本上，我想创建一个ul，其中包含任意数量的li元素。我希望每个li元素的宽度为20％，因此每行最终会有五个li个元素。

我还希望ul元素有一些高度，所以我可以应用底部边框。

如果我在li s：

上使用此课程

.result1 { 
  width: 20%;
  float: left;
}

然后ul的高度为0.我看过推荐display: inline-block的帖子，但如果我改用它：

.result2 { 
  width: 20%;
  display: inline-block;
}

然后ul有高度，但li之间有空格，所以它们会突破两行。

这一定是CSS规范中的一些我无法理解的东西。如何在每行中获得五个元素，包含元素的高度？

Answer 1

将overflow: hidden;添加到父<ul class="results">

Answer 2

浮动元素会导致父级折叠，您需要清除父元素。

.results:after {
  content: "";
  display: table;
  clear: both;
}