CSS多列布局异常：用户数为奇数时<li>元素被截断

云原生阿岚

2026-5-28

解决两列用户列表奇数用户时

被截断的问题

嘿，我来帮你排查这个两列用户列表的问题！你遇到的

元素被截断的情况，其实是CSS多列布局里的常见小坑——默认情况下，浏览器允许块级元素跨列拆分，当用户数量为奇数时，最后一个列表项刚好落在列的分界点附近，就会被切成两半。你移除column-fill: balance的操作其实没找对问题根源，这个属性只是控制列的高度是否平衡，没法阻止元素被跨列拆分。

具体解决方案

只需要给列表项<li>添加一个CSS属性，就能阻止它被拆分到不同列中：

.first-main-column {
  .first-column-window {
    height: 700px;
    background-color: #ffffff;
    .user-container {
      height: 350px;
      width: 100%;
      overflow: auto;
      columns: 2;
      column-gap: 1em;
      column-rule: thin solid black;
      h2 {
        font-family: "Bebas Neue";
        column-span: all;
      }
      .list {
        ul {
          li {
            width: 80%;
            border-radius: 5px;
            margin: 0 auto;
            // 关键属性：阻止列表项跨列拆分
            break-inside: avoid;
            // 兼容旧版浏览器可添加（可选）
            page-break-inside: avoid;
          }
        }
      }
    }
    .btn-container{
      width: 100%;
      height: 350px;
      button {
        margin: 5% 0;
        padding: 5%;
      }
    }
  }
}