Question

使用LI内容时，如何防止这种奇怪的级联效应，如下所示： http://jsfiddle.net/arPzt/1/

我可以通过在每个LI之后插入BR来实现所需的行为，但是a）LI之间的垂直间距似乎根据内容的长度而变化，并且b）必须有一些更好/更适当的方法来实现这一点。

<ul>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>
</li>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>    
</li>
<li>
  <div style="background-color: #990000; width:70px; float: left">
      <img style="width: 45px" src="http://www.google.com/doodle4google/images/doodles/2013/1-5.jpg" />
  </div>
  <div style="background-color: #00FF00; margin-left: 70px;" >
  body some interesting large amount of content. some interesting large amount of content.
  </div>    
</li>    
</ul>

Answer 1

您正在浮动元素，但如果您希望它们清除上一行，则需要使用clear: left或clear: both，如果您使用了正确的浮动元素。

li {
  clear: left;
}

jsFiddle：http://jsfiddle.net/arPzt/3/

Answer 2

我相信你需要做的就是在每个LI

之后清除'浮动'

像这样：

<li style="clear:both;">

Answer 3

我建议，作为clear:left建议的替代方案，您可以考虑在li元素上使用overflow:hidden。

虽然clear:left修复了这个简单的示例，但您仍然可能在列表后面有任何其他内容的布局问题。在li元素上使用overflow:hidden会将任何浮动效果限制为仅包含这些项目。

this article中的更多信息。

防止带有图像的div在LI中奇怪地包裹

3 个答案: