漂浮的图像弄乱了父div的宽度

Question

我无法理解这一点。请看这个页面： http://jonaseklundh.se/test/imgfloat.php

如您所见，当列表项左侧浮动时，每个LI的图像宽度与没有图像的图像相同。那是为什么？

我已经尝试解决这个问题很长一段时间了，但我无法弄明白。有人有任何想法吗？

Answer 1

在样式表中添加如下样式

.text {
    float: left;
}

<强>截图

Answer 2

尝试将div更改为display: inline，或者更好的是，对<span>的内容使用内联元素<div>而不是块级元素<li> 1}}，并使图像内联。然后，<li>的内容根本不会浮动。

Answer 3

我不知道是什么设置li元素的宽度。 如果你没有修复，试试这个：

ol div.text, ul div.text
{
 padding:6px;
 overflow:visible;
 min-height:14px;
 white-space:nowrap;
 min-width:80px;
}

我刚回头查看了您的链接页面，但它在我的所有浏览器中都显示为固定。