使用 CSS 将项目显示为有序列表

Question

我对如何将列表显示为 css 感到非常困惑。我看到有一个选项可以将元素显示为列表项，但是如何指定父元素应该是有序列表？

例如：

<style>
  .list_item{
    display:list-item;
  }
  .ordered_lit{
    display:???;
  }
</style>
<div class="ordered_list">
  <div class="list_item"></div>
  <div class="list_item"></div>
</div>

谢谢！

Answer 1

您不需要指定父级的display属性，只需list-style-type在 CSS 中为“list-item”元素指定（它将负责显示计数器，我怀疑这是您要解决的问题）：

div.counter {
    display: list-item;
    list-style-type: decimal;
}

上面的 CSS 适用于 HTML：

<div>
    <div class="counter"></div>
    <!-- identical elements removed for brevity -->
    <div class="counter"></div>
</div>

JS Fiddle 演示（已确认在 Chromium 28/Ubuntu 12.10 中工作，显然在 Firefox 中不工作）。

如果您只需要支持那些能够使用伪元素的浏览器，那么您可以选择使用 CSS 生成的计数器：

div.parent {
    counter-reset: pseudoListNumbering;
}

div.counter::before {
    counter-increment: pseudoListNumbering;
    content: counter(pseudoListNumbering, decimal-leading-zero);
}

JS小提琴演示。

参考：

• display.
• list-style-type.
• 使用 CSS 计数器。