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元素的宽度设置为可用空间的三分之一意味着我们可以在每行上放置三个浮动li，然后浏览器将下一个推送到新行。

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

Answer 2

如果您没有固定大小的列表项，可以使用jQuery轻松完成：

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

这将获取每个第三个元素，并为下一个元素添加清晰。这就是..无论你的列表项是多大，它都会在每个第3个元素之后接下来到新行。

Answer 3

您必须设置每个<li>宽度 - 例如width: 100px;和<ul>设置width: 300px。

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

Answer 4

正如ПанайотТолев在他的帖子中提到但只有CSS3：

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

选择每个第3个元素并添加一个clear：both到下一个列表元素

Answer 5

如果你想用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>

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

5 个答案: