2

我对如何将列表显示为 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>

谢谢！

4

4 回答 4

5

您不需要指定父级的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 小提琴演示。

参考：

于 2013-09-21T21:18:26.033 回答
0

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

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

顺便说一句：你真的应该为 case 使用正确的 HTML 标签：ul/ol而不是divs。为什么？因为否则您将不得不自己记住margin/之类padding的事情。使用ul/ol浏览器开箱即用。检查DEMO以了解您可能面临的示例问题。

于 2013-09-21T21:17:57.210 回答
-1

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

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

于 2013-09-21T21:19:16.690 回答
-1

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

于 2013-09-21T21:21:03.167 回答