Question

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

然而，它仍然无法解决我的情况：

我想做的是将ul的背景传递给li，也可以使用float ul。

结果我无法清除浮动，除了在ul外面添加一个div来清除浮点数。还有更好的方法吗？

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/

我想要得到的是：

＆＃34;文字之前＆＃34;应该在ul之前

和＆＃34; Text＆＃34;应该在ul之后

感谢所有人提供的解决方案，最好的解决方案是：

ul：display：table-cell for above / below ul：display：inline-block for before / after

无需浮动，因此无需清除浮动，越少越好

Answer 1

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

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/

Answer 2

试试这个

div{
    background: #888;
}
.wrapper {
    list-style-type: none;  
    background: #888;
    display:inline-block;  
    padding:0;
    margin:0;
}

.wrapper li {
    float: left;
    padding: 10px;
     
   
}

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

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

Answer 3

见Brett DeWoody的评论。如果您希望在这些文本之间放置<p>Text Before</p> <ul class="wrapper"> <li>test1</li> <li>test2</li> <li>test3</li> <li style="background:#555">test4</li> </ul> <p>Text After</p>元素，可以将它们放在容器中。例如，让它像这样坐在跨度中：

.wrapper {
    list-style-type: none;
    display: inline-block;
    background: #888;
}
.wrapper li {
    float: left;
    padding: 10px;
}
.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

CSS：

 Distributable Skill Points = 100

 strength      0------------------[]--------------- 100   (45)
 agility       0------[]--------------------------- 100   (10)
 intelligence  0------------[]--------------------- 100   (20)

                                          remaining pts   (15)

请参阅小提琴：http://jsfiddle.net/EyNnk/462/

Answer 4

从ul，Li中删除float:left; 并添加display:inline-block;

Answer 5

如果您希望前后文字位于<ul>添加display:inline-block至.wrapper的左/右。

.wrapper {
  list-style-type: none;
  background: #888;
  display:inline-block;
}

这是demo。

如果您希望前后文本位于<ul> add显示的顶部/底部：block to the。wrapper`。

.wrapper {
  list-style-type: none;
  background: #888;
  display:block;
}

这是demo。

如何清除ul的浮点数

5 个答案: