使用column-count展示元素列表遇到布局错位问题

你遇到的问题核心在于：CSS多列布局（column-count）是基于内容流自动分配空间的，它不会默认识别你的每个顶级<li>是需要保持完整的“列模块”，所以会把长内容随意拆分到相邻列中。

修复方案：强制保持列模块完整性 #

给每个包含标题和子列表的顶级<li>添加break-inside: avoid;属性，让浏览器强制将每个标题+子列表作为一个整体分配到单列中，再调整一些基础样式优化布局：

修改后的CSS代码

#columnasFooter {
  column-count: 3;
  list-style: none; /* 移除父列表默认的项目符号 */
  padding-left: 0; /* 清除父列表默认内边距 */
  gap: 1.5rem; /* 给列之间添加间距，提升可读性 */
}

#columnasFooter > li {
  break-inside: avoid; /* 关键：禁止当前元素被跨列拆分 */
  margin-bottom: 1rem; /* 给每个列模块添加底部间距 */
}

#columnasFooter > li > ul {
  list-style: disc; /* 恢复子列表的项目符号 */
  padding-left: 1.5rem; /* 子列表缩进对齐 */
}

原HTML结构可保持不变

<ul id="columnasFooter">
 <li>Title column 1
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 <li>Item 7</li>
 <li>Item 8</li>
 </ul>
 </li>
 <li>Title column 2
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 <li>Item 7</li>
 <li>Item 8</li>
 <li>Item 9</li>
 </ul>
 </li>
 <li>Title column 3
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 </ul>
 </li>
</ul>

原理说明 #

break-inside: avoid; 属于CSS Fragmentation模块的属性，它明确告诉浏览器：不要在当前元素的内部或边界位置拆分内容块。这样每个顶级<li>就会作为一个独立单元被分配到对应列中，完美匹配你想要的“标题+子列表”对应单列的需求。

如果需要兼容旧版浏览器（比如老版本Safari），可以额外添加前缀写法：-webkit-column-break-inside: avoid;，不过现代浏览器已经普遍支持标准写法了。

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