使用 Chrome、IE7 和 IE8 在 ul 中浮动文本

Question

无序列表 (ul) 中的浮动文本存在一些问题。问题出现了，因为我想将div元素向左浮动，我需要这样做，因为在这个div之后还有另一个div，需要在同一行，所以我使用float left。这是jsFiddle 的示例。现在的问题是，在 FF 6.02、Opera 11.50 和 IE9 中它工作正常，但在 Chrome 14.0.835.202、IE7 和 IE8 中，应该出现在文本前面的圆圈几乎出现在背景文本的末尾.

我已经在 jsFiddle 上发布了示例，但也会在这里发布代码：

HTML：

<ul>
<li>
    <div class="textLeft">Glavna knjiga</div>
</li>
</ul>

CSS：

.textLeft {
float: left;
position: relative;
left: 4px;
}

现在我该如何解决这个问题，以便在 IE7 和 Chrome 中显示相同？

Answer 1

为什么需要浮动 div？将您的 div 设置为 display:inline-block ，这将处理它。您必须记住的一件事是行内块显示在 div 的右侧创建了 4px 的边距，因此如果您有一个固定宽度的列表项 (li)，则必须考虑到这一点。

如果我能提供帮助，我通常不喜欢浮动元素。

Answer 2

问题是 div 是浮动的，但 li 本身不是。这使得列表项的指示符，即圆圈，被定位为好像 div 不存在一样。是否可以浮动li，或者可能是整个ul？

Answer 3

如果您不必使用相对位置，您可以将两个 div 设为 inline-block，而不是 left，使用 padding-left。

这是一个例子：http://jsfiddle.net/bQthE/3/