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

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 pre 9中,您的container(ul)必须具有宽度属性.
• 在50%时,基于IE pre 9计算这些与其他浏览器的方式,您没有任何填充或边框空间.(即一个将填充包含在指定宽度中,另一个添加填充到宽度).下降到47%到49%之间的位置通常会修复那些可疑的错误.

不幸的是,如果你正在寻找纯CSS,这是输出的唯一方法.如果你需要:

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

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

FuzzicalLogic