css - 列表元素应该正好显示 5 个项目

Question

我有一个包含 100 个元素的列表，但我只想使用垂直滚动条一次显示 5 个元素。<li>没有固定的高度，并且可以根据其内容（从数据库中获取）而变化。问题是我可以保持一个固定的高度，<ul>它可以显示 5 个项目，但有时当内容<li>跨越多行时，最后一个元素被推下。

所以问题是，有没有不使用 javascript/jquery 的方法，其中高度<ul>总是等于前 5 个包含的<li>元素。

Answer 1

这可能仅使用 CSS 是不可能的。ul仅当高度不适合其内容时才会弹出常规滚动条，仅当高度不依赖于其子级（在设计时具有未知高度）时才会发生这种情况。

此外，滚动通常是“连续的”：您可以显示项目的一部分。您似乎正在寻找更多“离散”滚动：一个“滴答”向下意味着顶部li被“滚动”掉，下一个li被添加到底部。

我认为您应该寻找替代方案，要么li是具有滚动条的固定高度，要么是带有省略号的溢出和带有全文的弹出框的组合，或者是一些 JavaScript 解决方案。