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？

非常感谢！

score 6 · Accepted Answer

使用这个 CSS：

li {
    display: inline
}

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

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

score 2 · Accepted Answer

我有两种方法给你：

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

ul {
   width: 320px;
}

score 1 · Accepted Answer

1

我不知道这是否合适，但看看演示小提琴

于 2012-06-01T06:15:36.347 回答

score 1 · Accepted Answer

你有不同的选择：

4 回答 4