internet-explorer-7 - 列表项对的浮点数在 < IE7 中不起作用

Question

我有这样的事情：

<ul>
<li class="first">Hello</li>
<li class="second">World</li>
<li class="first">Hello</li>
<li class="second">World</li>
</ul>​

像这样的CSS：

.first {
    float: left;
    clear: left;
}

.second {
    float: left;
    clear: right;
}

我想要这样：

你好
世界你好世界

但在 IE7 中显示如下：
HelloWorldWorld
Hello

谁能解释我为什么，以及如何解决这个问题？

​这里有一个链接

JSF中...

Answer 1

发生此问题是因为父元素（在本例中为ul）没有宽度，因此元素严重折叠。通过为子项和父项添加宽度，您可以实现您正在寻找的结果。

这是您的 JSFiddle 的更新版本：http: //jsfiddle.net/vVwQM/