有什么方法可以使下面的例子中的有序列表看起来像

Question

我想创建一个包含HTML的有序列表，如下所示：

2.1 tesa
2.2 tesbasdfasd
2.3 asfdasd
2.4 sdfsd

有可能这样做吗？我真的想使用 ol 和 li ，因为我喜欢它为数字提供空间的方式，如果有多行。

Answer 1

使用CSS执行此操作的一种方法：

<强> HTML：

<ol id="myList">
    <li>tesa</li>
    <li>tesbasdfasd</li>
    <li>asfdasd</li>
    <li>sdfsd</li>
<ol>

<强> CSS：

#myList {
    list-style: decimal inside none;
    margin-left: 2em;
}
#myList li:before {
    content: "2.";
    float: left;
}

See it at jsFiddle.

这适用于所有新型号的浏览器。 Compatibility table

Answer 2

我认为这可能会对你有所帮助： https://developer.mozilla.org/en/CSS_Counters

Answer 3

这是我能想到的最好的（所有现代和IE8 +浏览器支持）

ol{
    counter-reset:list;
    list-style-type:none;
    padding:0;
    margin:0;
}
ol li{
    counter-increment:list;
    position:relative;
    padding-left:3em;
}

ol li:before{
    width:2em;
    position:absolute;
    left:0;
    text-align:right;
}
/*add one of the following classes to the <ol> to define the prefix*/
ol.prefix-1 li:before{
    content: '1.' counter(list);
}
ol.prefix-2 li:before{
    content: '2.' counter(list);
}

http://jsfiddle.net/gaby/rmCJC/1

演示

它将呈现为