<ol> 使用 CSS3 多列布局时不显示列表类型

Question

我正在对有序列表使用 CSS3 多列布局，但各个列表项的列表编号未显示在第二列中。

这是JSFiddle。

示例代码如下。

HTML

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

还有 CSS：

ol {
    -moz-column-count 2;
    -webkit-column-count: 2;
    column-count: 2;
}

Answer 1

这是因为ol 上的默认padding 允许显示数字。默认情况下，它们显示在元素的外部，并且由于第二列没有填充，因此它们不会显示。

您可以通过添加list-style-position: inside 将它们定位在内部：

ol {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  list-style-position: inside;
}

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

---

或者，您也可以使用CSS3 counters 并使用伪元素在li 元素上显示数字：

Example Here

ol {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  list-style: none;
  padding-left: 0;
}

ol {
  counter-reset: list;
}
li:before {
  counter-increment: list;
  content: counter(list) ". ";
}

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