将图像放在li标签内不会扩展li标签

Question

我在img标记内有li个标记，但li标记并未自动将其高度增加到图像的高度

示例：http://jsbin.com/iroyev/

我希望img进入li标记。这意味着背景颜色为#F0F0F0。

我怎样才能做到这一点？

Answer 1

浮动元素不会影响其父级的大小。

您可以将overflow应用于li元素来解决此问题：

ul#something li#someunit {
  background: none repeat scroll 0 0 #F0F0F0;
  border-radius: 10px 10px 10px 10px;
  clear: both;
  display: block;
  position: relative;
  overflow: hidden;
}

演示：http://jsbin.com/ubiquy/edit#preview

Answer 2

那是因为你正在浮动图像。尝试在关闭li之前添加div，使用clear属性标记图像。

<div style="clear:both;"></div>
</li>