Html 如何在ul水平列表中为每个x列表换行？

我有一个由PHP构建的水平动态

ul

列表，如下所示：

List1 List2 List3 List4 List5 List6 List7 List8 List9 List10

List1 List2 List3

List4 List5 List6

List7 List8 List9

List10

有没有办法每3张单子换一行？因此，结果如下所示：

List1 List2 List3 List4 List5 List6 List7 List8 List9 List10

List1 List2 List3

List4 List5 List6

List7 List8 List9

List10

我知道我可以调整

ul

宽度，使我的列表如上所示

---

但我想做的是每3个列表做一行。PHP、CSS或JavaScript可以做到这一点吗？任何人都可以提供帮助？

您必须设置每个

宽度-例如

宽度：100px和对于
设置
宽度：300px

ul, li {
  margin: 0;
  padding: 0;
}
ul {
  width: 300px;
}
li {
  width: 100px;
  float: left;
  list-style: none;
}

如果您想使用PHP而不是css（如@hsz所建议的），可以将其拆分为
ul
，其中最多包含3个
li

<ul class="...">
<?php
$i = 1;
$array = (/* 10 items */);
foreach ($array as $item) {
    if ($i % 3 == 0) { echo '</ul><ul>'; }
    echo "<li>{$item}</li>";
    $i ++;
}
?></ul>



如果您没有固定大小的列表项，您可以使用jQuery进行简单操作：

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

这需要每三个元素，并将clear添加到下一个元素。就是这样。。无论列表项的大小如何，它都会在每第3个元素之后的下一个元素进入新行。
如何-

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

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

我想您可能可以将
float:left
语句替换为
display:inline
，以获得相同的效果。
正如Пааааааааааааа1072

li:nth-child(3n) + li
{
    clear:both;
}

选择第三个元素，并在下面的列表元素中添加一个clear:bother
如果您发布PHP代码，我也可以帮助您。。。对于phpseems，最好使用css来实现这一点，但是OP指定列表是水平动态的。当我在代码中使用您的方法时，它失败了。所以我用CSS试试，效果很好，谢谢…：）