CSS循环布局列

Question

我有一个这样的清单：

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  .... etc ....
</ul>

而不是像

那样结束

A
B
C
D
E
...

我希望它最终会出现在这样的列中：

A      B      C
D      E      F
G      H      I
....  etc  (ordered alphabetically)

如果我必须用服务器端语言执行此操作，我会执行类似创建三个数组的操作，每个列一个，并遍历每个项目，将其放在正确的列中，但是更容易用CSS3做的方法吗？

非常感谢！

Answer 1

使用此CSS：

li {
    display: inline
}

li:nth-child(3n):after {
    content: '\a';
    white-space: pre;
}

演示：http://jsfiddle.net/3UN4f/1/

首先我将列表项内联，然后\a插入一个换行符。以下是该规范：http://www.w3.org/TR/CSS2/syndata.html#strings。 nth-child是CSS3：http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Answer 2

我有两种方式：

1. 使用<table>以获得列
2. 为您的元素设置此CSS：

li {
   width: 100px;
   float: left;
}

ul {
   width: 320px;
}

Answer 3

我不认为这可能是合适的，但请查看demo fiddle

Answer 4

您有不同的选择：

1. Multicolumn-Layout（atm对浏览器的支持不是很好） - the specs
2. 将float:left和width:100%/<no of cols>（3列= 33％）放在li - 元素
上
3. 在:nth-child(<no of cols>)后通过content在伪元素上暂停。
4. 如果您有表格数据：使用表格