html - 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