在两行而不是一列中显示<ul>

Question

我想在html网页的两行中显示无序列表。

我希望它看起来像这样：

我可以找出空格和边距来隔开名称。我只是想知道可以使用什么方法将列表分成两部分。

Answer 1

您可以使用CSS网格系统

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>

Answer 2

这应该有效：

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>