Question

如何将单个/一个列表（ol或ul）拆分为多个列？

我看到css columns属性不起作用：遗憾的是，新列不会被解释为新行，因此数字（ol）或项目符号（{{1} }）项目未出现在新列中。

＆＃13;

ul

＆＃13;

ol,
ul {
  columns: 3;
}

＆＃13;

Answer 1

列仍然有点儿麻烦。你的例子在Firefox中看起来很好（只要你添加了-moz-前缀就可以了）。在Chrome中，它会按照您的描述切断子弹/数字 - 但您可以添加 list-style-position：inside 来更改绘制的位置。如果您的列表项都是一行，则此方法很有用，但如果它们扩展到多行，它确实会改变外观。

Answer 2

在这种情况下，供应商前缀很重要。您的代码在没有前缀的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>

多列上的有序/无序列表

2 个答案: