如何让<ul>元素溢出的列表项自动向右新建列排列？

当然可以实现这种列表项溢出后自动向右开启新列的效果！你想要的就是内容在垂直方向填满容器高度后，自动流向右侧新列，这在CSS里有几种成熟的解决方案，刚好匹配你的需求，我给你详细拆解：

这是专门为“内容垂直填满后自动分栏”设计的CSS特性，完全贴合你的需求。只需要给<ul>设置固定高度，再配合几个多列属性就能实现：

ul {
  height: 300px; /* 你要求的固定高度 */
  column-fill: auto; /* 让内容优先填满每一列的高度，而非均分内容 */
  list-style: none; /* 可选，移除默认列表符号 */
  padding: 0;
  margin: 0;
  column-gap: 10px; /* 可选，设置列之间的间距 */
}

li {
  height: 60px; /* 包含内边距、边框的总高度 */
  box-sizing: border-box; /* 确保padding和border计入总高度 */
  padding: 10px;
  border: 1px solid #ddd;
  margin: 0 0 5px 0; /* 项之间的垂直间距 */
  break-inside: avoid; /* 关键：防止单个列表项被拆分到两列 */
}

效果说明：

• 当只有4个列表项时，总高度4*60px=240px小于容器的300px，所以全部在单列排列；
• 当有6个列表项时，总高度6*60px=360px超过容器高度，浏览器会自动创建新列，把溢出的内容放到右侧列中。

如果你需要更精细地控制列数、行高或者排列规则，Grid布局也是不错的选择。核心是通过grid-auto-flow: column让内容按列填充：

ul {
  height: 300px;
  display: grid;
  grid-template-rows: repeat(5, 60px); /* 固定5行，每行60px（刚好填满300px高度） */
  grid-auto-flow: column; /* 内容先填满当前列的所有行，再创建新列 */
  grid-auto-columns: 100%; /* 每列宽度和容器一致 */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 5px; /* 可选，设置项之间的间距 */
}

li {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ddd;
}

这个方案会严格按照你设置的行数量来分栏：每列最多放5个列表项，第6个就会自动跳到右侧新列，完全符合你的高度限制要求。

没错，这确实和display属性有关：

• 多列布局可以直接作用于默认display: block的<ul>，不需要修改它的display属性；
• Grid布局则需要把<ul>的display设置为grid，才能启用网格排列规则。

不过对于你的需求来说，多列布局是更直接的选择，因为它就是为这种流式分栏场景设计的。

内容的提问来源于stack exchange，提问作者rydwolf