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（它将负责显示计数器，我怀疑这是您要解决的问题）在'list-item'元素的CSS中：

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 demo（确认在Chromium 28 / Ubuntu 12.10 not working in Firefox中工作，显然）。

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

div.parent {
    counter-reset: pseudoListNumbering;
}

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

JS Fiddle demo

参考文献：

Answer 2

如何指定父级应该是有序列表？

简单回答：你不能。没有特殊的display值来指定list-item元素的父级。

顺便说一下：你真的应该为案例使用正确的HTML标签：ul / ol而不是div s。 为什么？ 因为否则您必须自己记住margin / padding之类的内容。使用ul / ol浏览器即可开箱即用。检查DEMO您可能遇到的样本问题。

Answer 3

display生成有序列表没有任何价值。请参阅规范：http://dev.w3.org/csswg/css-display-3/#display

因为无序列表不需要计数，所以每个元素前面都有相同的内容。

Answer 4

Css显示值'list-item'只是一种类似li元素的行为：在内容之前插入一个项目符号并在元素之后插入一个中断。数字或字母列表没有css显示值。

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

4 个答案: