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

Question

如何让 2 列包含 3 行？

<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 解决方案是让列表项的宽度为宽度的 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 中，您的容器 (ul) 必须具有宽度属性。
• 根据 IE pre 9 与其他浏览器的计算方式，在 50% 时，您没有任何填充或边框空间。 (即一个将填充合并到指定的宽度中，另一个将填充添加到宽度中)。降低到 47% 到 49% 之间的某个位置通常可以修复那些微不足道的错误。

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

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

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

模糊逻辑