问如何使用CSS将<ul>显示为两个并排的列？

EN

一个简单的纯CSS解决方案是让列表项的宽度为宽度的1/2，并让它们向左浮动。这是一个可接受的解决方案，只要您能接受以下输出。

Item 1         Item 2
Item 3         Item 4
Item 5         Item 6

CSS将为：

ul.class-name li {
    float:left; width:50%;
}

这里有一些简单的注意事项：

• 在IE pre9中，你的容器(ul)必须有一个宽度属性。
• 为50%时，根据IE pre9与其他浏览器计算这些宽度的方式，你没有任何填充或边框的空间。(即一个将填充合并到指定的宽度中，另一个将填充添加到宽度中)。降低到47 %到49%之间通常可以修复这些微不足道的错误。

不幸的是，如果您正在寻找纯CSS，这是输出的唯一方式。如果您需要：

Item 1      Item 4
Item 2      Item 5
Item 3      Item 6

..。那么，Valchris的解决方案可能对你最好。

FuzzicalLogic

这是我几年前提出的一个很糟糕但很有趣的CSS1解决方案：

http://phrogz.net/tmp/two-column-list-pure-css.html

:)

http://www.w3.org/Style/Examples/007/evenodd.en.html

<ul>   
    <li> Test 1</li>
    <li> Test 1</li>
    <li> Test 1</li>
    <li> Test 1</li>  
</ul>

CSS是：

li:nth-child(n+3) {
    background-color:white; 
}

这应该会有帮助

使用这个站点：http://cssdesk.com/来演示你的代码。