html – 多列上的有序/无序列表

如何将单个/一个列表(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>

解决方法

列仍然有点儿.你的例子在Firefox中看起来很好(只要你添加了-moz-前缀就可以了).在Chrome中,它会像您描述的那样切断子弹/数字 – 但您可以添加list-style-position：inside来更改绘制的位置.如果您的列表项都是一行,则此方法很有效,但如果它们扩展到多行,则会更改外观.