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

Question

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

代替元素符号的是一个圆圈，里面有一个数字，旁边的文字......

我知道如何在 css3 中创建圆圈，但是如何用圆圈替换 ul 附带的元素符号？

我根本不应该使用列表来创建它吗？我只需要里面有数字的圆圈，每个圆圈旁边的文字写着 xyz...

例如:

圆(里面有 1 个)xyz

圆(里面有2个)zzz

圆(里面有3个)aaa

感谢您的帮助:)。

Answer 1

@瑞安；是的，你可以像这样使用 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;
}

检查 fiddle 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/