1

float我对应用于li元素似乎意味着包含ul元素没有高度这一事实感到困惑。您可以看到这个 jsFiddle 中演示的问题。

基本上，我想ul用任意数量的li元素创建一个。我希望每个li元素的宽度为 20%，所以我最终li每行有五个元素。

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

如果我在 s 上使用这个类li：

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

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

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

然后sul有高度，但是 s 之间有空格，li所以它们超过了两行。

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

4

2 回答 2

5

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

小提琴

于 2013-03-19T17:53:46.433 回答
2

浮动元素导致父元素崩溃，需要清除父元素。

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

http://jsfiddle.net/CuCdr/1/

于 2013-03-19T17:53:27.100 回答