如何清除 ul 的浮动答案

【问题标题】：How to Clear float for ul如何清除 ul 的浮动
【发布时间】：2015-08-18 10:56:59
【问题描述】：

我在这里发现了类似的问题 - 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/

我想要得到的是：

“Text Before”应该在ul之前

并且“Text After”应该在ul之后

感谢大家的解决方案，connexo 是最好的：

ul: display:table-cell for above/below ul: display:inline-block 用于之前/之后

不需要浮动，这样就不需要清除浮动，越少越好

【问题讨论】：

你说的前后，是指文字应该在ul的上方/下方，还是ul的左侧/右侧？
我对 ul 非常满意，因为内联块解决了“之前”和“之后”。然而你的问题启发了我去问，如果“上方”和“下方”呢？
查看我提出的左/右和上/下解决方案-stackoverflow.com/a/32042822/438581

标签： css

【解决方案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/

【讨论】：

根据我的问题，您的解决方案是最好的。 “之前”和“之后” - 现在我想知道您是否也可以将其设为“上方”和“下方”？
简单。检查第二个解决方案。
感谢您巧妙的清晰修复：表格单元用于上方/下方，内联块用于之前/之后

【解决方案2】：

请参阅 Brett DeWoody 的评论。如果您希望将 <ul> 元素内联在这些文本之间，您可以将它们放置在其容器中。例如，让它像这样坐在 span 中：

<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>

CSS：

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

见小提琴：http://jsfiddle.net/EyNnk/462/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您希望前后文本位于<ul> 的左侧/右侧，请将display:inline-block 添加到.wrapper。

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

这是demo。

如果您希望前后文本位于 <ul> adddisplay:blockto the.wrapper` 的顶部/底部。

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

这是demo。

【讨论】：

第二个演示（上和下）。是否可以清除UL不需要的背景，使其看起来像Demo one
您能否提供您希望其外观的屏幕截图或模型？
我已经更新了demo 2，所以<ul> 出现在演示1 @SIDU 中。 jsfiddle.net/brettdewoody/vz8ursx8

【解决方案5】：

试试这个

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>

【讨论】：

谢谢。但我不希望 UL 背景跨越整条线，这就是为什么我使用 float for UL 来消除不需要的背景