html - 如何在li元素中 float 两个元素而不每次都清除

Question

我有一个堆叠列表，我想在其中 float 一个 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>

---

如果您只 float li 的内容(img 和 a)，那么您可以只需将 li 的 overflow 设置为 auto 或 hidden ，它就会按预期工作。

li{overflow:auto;}

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