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;
}