html - 如何在每个 x 列表的 ul 水平列表中换行？

Question

我有像这样由 PHP 构建的水平动态 ul 列表:

List1 List2 List3 List4 List5 List6 List7 List8 List9 List10

有没有办法每 3 个列表换行？因此，结果将如下所示:

List1 List2 List3

List4 List5 List6

List7 List8 List9

List10

我知道我可以调整 ul 宽度使我的列表看起来像上面那样。

但我想要的是每 3 个列表换行。 PHP、CSS 或 JavaScript 可以做到这一点吗？谁能帮忙？

Answer 1

怎么样——

li {
  width: 33%;
  float: left;
  list-style: none;
}

将每个 li 元素的宽度设置为可用空间的三分之一意味着我们可以在浏览器推送下一行之前在每一行上放置三个 float 的 li一个到一个新的行。

我想您可以将 float: left 语句换成 display: inline 以获得相同的效果。