Question

基本上我想知道在CSS中创建简单列表的最佳方法：

而不是子弹有一个圆圈，里面有一个数字，旁边的文字......

我知道如何在css3中创建圆圈，但是如何用圆圈替换ul附带的子弹？

我根本不应该使用列表来创建它吗？我只需要带有数字的圈子，并在每个圈子旁边的文字说xyz ......

例如：

圈（内有1个）xyz

圈（内置2个）zzz

圈（内有3个）aaa

感谢您的帮助:)。

Answer 1

@Ryan;是的，您可以使用css counter-increment属性执行此操作：

ul {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}
li:before {
    display: inline-block;
    content: "("counter(item) ") ";
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}

检查小提琴 http://jsfiddle.net/sandeep/ndBZk/

编辑：带圆圈的列表

的CSS：

li:before {
    display:block;
    content: counter(item);
    counter-increment: item;
    width:20px;
    height:18px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background:red;
    text-align:center;
    position:absolute;
    top:2px;
    left:-30px;
    padding-top:2px;
}

http://jsfiddle.net/sandeep/XuHNF/3/

在css中制作此列表的最佳方法

1 个答案: