Question

如何制作包含3行的2列？

<ul>

<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>

<li>Item-4</li>
<li>Item-5</li>
<li>Item-6</li>

</ul>

谢谢

Answer 1

一个简单的纯CSS解决方案是将List Items设置为宽度的1/2，然后让它们向左浮动。这是一个可接受的解决方案，只要您可以接受以下输出。

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

CSS将是：

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

有一些简单的考虑因素：

在IE 9中，您的容器（ul）必须具有宽度属性。
在50％时，基于IE pre 9计算这些与其他浏览器相比的方式，您没有任何填充或边框空间。（即一个包含填充到指定的宽度，另一个添加填充到宽度）。下降到47％到49％之间，通常会修复那些可疑的错误。

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

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

......那么，Valchris的解决方案可能最适合你。

FuzzicalLogic

Answer 2

这是我多年前拼凑的一个可怕但有趣的CSS1解决方案：
http://phrogz.net/tmp/two-column-list-pure-css.html

：）

Answer 3

<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/来演示您的代码。