将数组列表分为 3 列，但在 HTML CSS 中未正确对齐答案

【问题标题】：Divide Array list into 3 column but it not aligned properly in HTML CSS将数组列表分为 3 列，但在 HTML CSS 中未正确对齐
【发布时间】：2021-09-25 18:10:10
【问题描述】：

对象数组，我必须将一个列表分成包含 Line 的 3 行，它们分隔两列，所以，我编写了以下代码：-

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

{Arr.map((element) => (
  <ul className={divide}>
   <li>{element.num}</li>
  </ul>
)}

<div>

CSS

.divide {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid rgba(0, 0, 0, 0);
}

这对我有用，但元素列表没有正确对齐，在一行中，第一列元素位于顶部，其余列元素位于行的中间或底部，所以，我想把 Column 中的所有元素都对齐在顶部，

注意：- 对齐不匹配可能是由于元素字符串的长度太大，这就是它产生问题的原因，

建议我如何解决这个问题

【问题讨论】：

添加一些额外的代码，以便重现您的问题。喜欢html 和更多css
您的代码中有多个问题。 1.不要在map函数的返回元素中使用key，2.使用divide作为参数而不是用引号括起来
是的，我想注意到没有 HTML，它是 JSX + JavaScript。提供额外的代码。
@RazLuvaton 再检查一遍我把圆括号放在上面，所以它会自动返回
使用 sn-ps 以便我们对其进行测试

标签： javascript html css reactjs

【解决方案1】：

试试：

<ul className="divide">
  {Arr.map((element) => (
    <li>{element.num}</li>
  )}
</ul>

CSS

.divide li {
  word-break: break-all;
}

【讨论】：