Question

是否可以给出一个特定高度或类似的列表（＆lt; ul＆gt;），如果有太多，它只是将项目（＆lt; li＆gt;）移动到新列中？

我在这里说明了一遍：

红色框具有特定高度。如果项目数量多于可用空间，则应该简单地将它们移动到下一行，就像我的示例中的“List7，List8，List9”一样

Answer 1

使用CSS列计数，如下所示：

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

虽然它不受普遍支持，但受到挑战的浏览器只会忽略它。对于他们来说，你必须做一些非语义的事情，比如手动将它分成多个UL并浮动它们或同样可怕的东西。

Answer 2

快速的方法是float您的li代码，如下所示：

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
    float: left;
    border: 1px solid #0f0;
    width: 50px;
}

但是这会给你以下结构：

List1    List2    List3
List4    List5

如果您特别需要提供的图像中的结构，那么您可能需要使用jQuery查看一些动态渲染以获得完整的浏览器支持。

Answer 3

是的，您可以使用column-count：

ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    height: 60px;
    width: 300px;
}

虽然并非所有浏览器都支持此功能。你可以使用javascript插件进行polyfill，或者只使用渐进式增强（毕竟它是一个列表）。