Question

我有一个堆叠列表，我想浮动一个img（图标）和文本。但是，我觉得在每个列表项后清除它很痛苦。这里有什么解决方案？任何提示如何让它更干净？

<ul>
  <li><img src="#" /> <a href="#">Home</a></li>
  <div class="clear"></div>
  <li><img src="#" /> <a href="#">About</a></li>
  <div class="clear"></div>
</ul>

Answer 1

您可以将li元素设为clear ..

<ul>
  <li class="clear"><img src="#" /> <a href="#">Home</a></li>
  <li class="clear"><img src="#" /> <a href="#">About</a></li>
</ul>

如果您只浮动li（ img和a ）的内容，那么您只需设置overflow li到auto或hidden，它会按预期工作。

li{overflow:auto;}

演示 http://jsfiddle.net/SqWHB/

Answer 2

是的，使用clearfix的类：

并添加此css：

.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
      clear: both;
}

Answer 3

你需要清楚一次，这是在ul。

之后

<ul>
   <li><img src="#" /> <a href="#">Home</a></li>
   <li><img src="#" /> <a href="#">About</a></li>
</ul>
<div class="clear"></div>

如何在li元素中浮动两个元素而不每次清除

3 个答案: