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

Question

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

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元素的宽度设置为可用空间的三分之一意味着我们可以li在浏览器将下一个元素推入新行之前在每一行上放置三个浮点数.

我想你可能会交换float: left语句display: inline以获得相同的效果.

Answer 2

如果你的列表项没有固定的大小，你可以使用 jQuery 来简单实现：

$('li:nth-child(3n)').next().css({'clear': 'both'});

这需要每隔三个元素，然后将clear 添加到下一个元素。就是这样..无论您的列表项的大小是多少，它都会将每第三个元素之后的下一个元素带到新行。