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

匿名者

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

谢谢!

大卫说恢复莫妮卡

您无需指定父项的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小提琴演示

参考:

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章