HTML列表项顺序

Question

我希望能够根据父元素的高度自动限制HTML列表的高度。不让列表在可见情况下溢出，但仍然可以将溢出的元素放在一起，并从那里继续迭代。由于列表是动态的，因此列表项的数量可能是1个或100个。

我知道每三个元素会达到元素的最大高度，所以我可以使用:nth-child()选择器。不过我更喜欢用更加优雅的方式来实现。

例如：

li 1    li 4    li 7
li 2    li 5
li 3    li 6

- Jesse

---

你可以使用 column-count。 - Paulie_D

问题在于我不知道列表元素的数量，因此我不知道列数。 - Jesse

你不需要知道列的数量，将其设置为自动，并调整列表项的高度，以使每列始终有3个项目。不幸的是，我使用的是移动设备，无法提供演示。 - Paulie_D

@Paulie_D 这将如何提供预期的布局？列表项应设置什么显示？标准块还是内联块？还是浮动？ - timo

Answer 1

如果您的列表项是动态填充的，则应使用循环（php），您还可以尝试使用css nth-child（）选择器进行调整。

如果您确切地知道有多少个列表项，请使用此选项。

   ul {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
   }

- Krone

---

是的，但是我可以使用哪些CSS属性来为nth-child选择器设置样式呢？ - Jesse

@Jesse nth选择器可以给您描述的示例布局，但不会解决您的实际问题。您的实际问题是元素应该叠放到其父元素的最大高度。 - timo

对于高度问题，只需使用inherit。你会用php吗？ - Krone

抱歉，我应该说明最大高度已经定义，所以我基本上知道每三个li元素应该换行。@Krone 我想仅使用CSS解决这个问题。 - Jesse

@Krone，你刚刚采纳了Paulie_D的建议，但实现方式是错误的。 - timo

是的，它适用于演示项目数量。但是，如果您实际阅读了问题和评论（我相信您已经这样做了，因为您从中获得了自己的答案），您会读到以下内容：“问题在于我不知道会有多少个列表元素，因此我不知道列数。” - timo