Html CSS循环布局列

我有这样一份清单：

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

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

我希望它能以这样的专栏结尾：

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

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

如果我必须用服务器端语言来实现这一点，我会创建三个数组，每个列一个，循环遍历每个项目，将其放置在正确的列中，但是使用CSS3有更简单的方法吗

---

非常感谢

我有两条路给你：

使用

以创建列

为元素设置此CSS：

li{
宽度：100px；
浮动：左；
}

保险商实验室{
宽度：320px；
}

我不知道这是否合适，但请看一下使用此CSS：

li {
    display: inline
}

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

演示：

---

首先我将列表项内联，然后

\a

插入一个换行符。以下是该项目的规范：<代码>第n个子项是CSS3:

您有不同的选项：

多列布局（atm在浏览器中的支持不是很好）——

将

float:left

和

width:100%/

（对于3列=33%）放在

li

-元素上

通过伪元素上的

content

在

：n-child（）

之后放置一个中断符

如果您有表格数据：请使用表格

---

我在过去回答过这个问题。使用此站点上的搜索功能。@A先生，您觉得它有用吗？代码块格式与列表格式冲突。我用literal

HTML标记替换了4个空格的格式，这就解决了它。是的，明白了。谢谢我没有通过其他选项卡进行调试。没问题，我只是想对格式问题有所了解。：）这有什么样的浏览器支持（你知道吗？）吗？顺便说一句，这基本上就是我想要的那种解决方案。下面似乎还有很多其他的好答案。但愿我能说每个人都是对的！（谢谢你的回答）嗯，我想我是问了CSS3，所以我要接受第一个人的回答。但我认为，为了兼容性，我可能会采用这个答案（只需做一个小改动，将宽度改为“33%”，而不是像素）。谢谢