css - 如何清除 ul 的 float

Question

我在这里发现了类似的问题 - Using :after to clear floating elements

及其演示解决方案: http://jsfiddle.net/EyNnk/1/

但是还是没有解决我的问题:

我想做的是通过使用 float ul 将 ul 的背景传递给 li。

因此我没有办法清除 float ，只能在ul 外添加一个div 来清除 float 。有没有更好的办法？

HTML

Text Before

<ul class="wrapper">
  <li>test1</li>
  <li>test2</li>       
  <li>test3</li>
  <li style="background:#555">test4</li>
</ul>

Text After

这是一个更新的问题:

http://jsfiddle.net/EyNnk/456/

我想得到的是:

"Text Before"应该在 ul 之前

和“Text After”应该在ul之后

感谢大家提供的解决方案，最好的选择是 connexo:

ul: display:table-cell for above/belowul: display:inline-block for before/after

不需要 float ，这样就不用清 float 了，越少越好

Answer 1

在 ul.wrapper 上使用 display: inline-block; 而不是 float: left;。

https://jsfiddle.net/EyNnk/460/

对于元素之间的新行，请使用 display: table-cell; 作为您的 ul.wrapper。而不是让你的 li { float: left; }，使用display: inline-block;。为避免不必要的空白问题，设置父级的 font-size: 0; 并重置为您在 li 上需要的字体大小。

https://jsfiddle.net/EyNnk/464/