背景颜色不会出现在列表项后面

Question

出于某种原因，我的列表项不在我的UL元素内，这会扰乱页面的流动，并且看起来不正确。我已经尝试过太阳下的每个位置元素，但没有任何作用。我想知道是因为我正在设计一个不同的div而不是UL元素？

请参阅示例here

红色边框用于保存列表元素，如果一个列表描述变得更长，则红色背景也应该增长。

由于

Answer 1

您的LI中有float，因此您必须清除其父UL。写得像这样：

ul{
 overflow:hidden;
}

选中此http://jsfiddle.net/Uc5cr/1/

Answer 2

正在发生的事情是LI元素是浮动的，因此超越了UL轮廓。您通常通过使用CSS中的clear: left;属性清除LI元素来解决此问题，当您想清除浮动时。

但由于这是在一个无序列表中，最好在你的UL元素上使用一个名为“clearfix”的CSS hack来解决这个问题。这样，UL元素将在高度上跟随LI元素。

示例：http://jsfiddle.net/mikaelbr/JkGRj/

注意：clearfix hack有很多版本。如果您有兴趣了解它们是如何工作的话，请进行谷歌搜索以找到一些。

Answer 3

给溢出：隐藏到div背景中以包含ul元素 看看http://jsfiddle.net/Uc5cr/7/

Answer 4

试试这个

ol, ul
{
  overflow:auto;
}

请参阅更新的小提琴：http://jsfiddle.net/Uc5cr/8/