使用HTML CSS将数组列表分为3列后元素对齐异常的解决咨询

• 核心错误点：你将column-count多列属性绑定给了循环生成的每个独立<ul>，相当于每个列表项单独占用一个3列容器，这是导致对齐异常的根本原因，和文本长度无关。正确写法是把所有<li>放在同一个设置了多列布局的<ul>容器下。

修正后的JSX代码 #

const Arr = [
  { num: 'jkjjk' },
  { num: 'jkjjk' },
  { num: 'jkjjkkj dshdjsh jhsjhsdj' },
  { num: 'jkjjkkj dshdjsh jhsjhsdj' },
  { num: 'jkjjkkj  ' },
  { num: 'jkjjkkj  jhsjhsdj' }
];

// ul放在循环外，所有li属于同一个多列容器
<ul className="divide">
  {Arr.map((element, index) => (
    <li key={index}>{element.num}</li>
  ))}
</ul>

修正后的CSS代码 #

/* 重置默认列表样式，避免默认边距干扰对齐 */
.divide {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 40px;
  /* 要显示分割线就把透明度改为大于0的数值，不需要可以删除该行 */
  column-rule: 1px solid rgba(0, 0, 0, 0.1);
}

/* 对齐核心配置 */
.divide li {
  /* 避免单个列表项被拆分到两列显示 */
  break-inside: avoid-column;
  /* 强制内容靠顶部对齐 */
  vertical-align: top;
  /* 可按需调整数值，控制行间距 */
  margin-bottom: 12px;
}

如果调整后还有轻微对齐偏差，检查是否有其他全局CSS对li的行高、内边距做了自定义设置，统一重置即可。

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