多列排列的有序/无序列表

Question

如何将单个列表（ol或ul）分成多列？

我发现使用CSS的columns属性无效：不幸的是，新的列没有被解释为新行，因此项目的数字（ol）或项目符号（ul）不会出现在新的列中。

ol,
ul {
  columns: 3;
}

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ol>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

- Juri

---

因此，项目的编号（ol）或项目符号（ul）不会显示在新列中，它们仅在列之外隐藏。设置list-style-position: inside;即可看到它们。 - CBroe

@CBroe，是的！非常感谢你（管理员，抱歉这个避免感恩节评论）。 - Juri

Answer 1

厂商前缀在这种情况下非常重要。如果没有前缀，你的代码在Firefox和Chrome之间会呈现不同的外观。

我相信CSS的column-count属性实际上是你要寻找的。此外，column-gap属性将在列之间添加间距。正如其他人指出的那样，list-style-position:inside;属性实际上是你要寻找的东西。

应该注意的是，这个解决方案按垂直顺序排列列表，所以它们从上到下排列，然后从列到列阅读。

ol, ul {
    -webkit-column-count: 3; -webkit-column-gap:20px;
    -moz-column-count:3; -moz-column-gap:20px;
    -o-column-count: 3; -o-column-gap:20px;
    column-count: 3; column-gap:20px;
    list-style-position: inside;
}

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ol>

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

- ThisClark

---

相关内容：https://dev59.com/ymw15IYBdhLWcg3wmc4J - ThisClark

但是，在第三项之前，列表中没有出现数字3或者项目符号...（这些只出现在第一列的前两个项目旁边）...谢谢。 - Juri

抱歉：我的浏览器没有显示数字/符号，但是我看到它们使用了 list-style-position: inside CSS 属性。 - Juri

我在Firefox上看到了这段代码，现在非常感谢你推荐的代码，现在可以在该浏览器中运行。 - Juri

Answer 2

列仍然有一些错误。您的示例在Firefox中看起来很好（只要您添加了-moz-前缀使其正常工作）。在Chrome中，它会截断标记/编号，就像您描述的那样-但是您可以添加list-style-position: inside以更改绘制位置。如果列表项都是一行，这非常有效，但如果它们延伸到多行，则会改变外观。

- Blorf

---

另外需要注意的是：在未来，您的原始示例代码应该可以直接运行。不幸的是，今天我们仍然需要等待浏览器跟上步伐。 - Blorf