0

使用以下 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>
4

3 回答 3

2

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

li {
  clear: left;
}

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

于 2013-05-02T22:11:44.583 回答
1

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

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

本文中的更多信息。

于 2013-05-02T22:57:34.727 回答
1

我相信您需要做的只是在每个 LI 之后清除“浮动”

像这样：

<li style="clear:both;">
于 2013-05-02T22:16:54.603 回答