css - 如何清除 ul 的 float

标签 css

我在这里发现了类似的问题 - 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 上需要的字体大小。

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

关于css - 如何清除 ul 的 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32042710/

相关文章:

html - css 最大宽度不起作用

html - 使列表项以特定方式相互重叠(顺序)

css - SCSS 多变量同值

javascript - 删除二级 UL 中的 “sub-menu” 类

css - 在文档高度内安装两个 <div>

jquery - 如何在 Slick 轮播元素之间添加空格

css - 禁用 div 缩放,但允许缩放页面(备用 div)

css - Mixins:实现有困难

css - 扩展绝对定位元素的宽度以包含水平放置的子元素,而不管父元素的宽度如何

javascript - 使 svg 缩放到全屏大小