5

我有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 能做到这一点吗？任何人都可以帮忙吗？

4

5 回答 5

10

不如——

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

将每个元素的宽度设置为li可用空间的三分之一意味着我们可以li在每一行放置三个 floated ，然后浏览器将下一个元素推入新行。

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

于 2013-01-31T10:25:21.557 回答
4

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

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

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

于 2013-01-31T08:54:23.043 回答
2

正如 Панайот Толев 在他的帖子中提到的，但仅限于 CSS3：

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

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

于 2016-10-18T13:19:56.790 回答
1

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

ul, li {
  margin: 0;
  padding: 0;
}
ul {
  width: 300px;
}
li {
  width: 100px;
  float: left;
  list-style: none;
}
于 2013-01-31T08:49:05.700 回答
0

如果您想使用 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>
于 2013-01-31T08:53:01.697 回答