我在这里发现了类似的问题 - 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/below ul: display:inline-block for before/after
不需要 float ,这样就不用清 float 了,越少越好
最佳答案
在 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
上需要的字体大小。
关于css - 如何清除 ul 的 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32042710/