css - 使用 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

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

您可以通过添加将它们定位在内部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 计数器li并使用伪元素在元素上显示数字：

这里的例子

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>