所选的答案是一个很好的开始，但它本质上强制list-style-position: inside;列表项的样式，使得换行文本难以阅读。下面是一个简单的解决方案，它还可以控制数字和文本之间的空白，并根据默认行为对数字进行右对齐。

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

注意:使用CSS计数器在现代浏览器中创建嵌套编号。请看公认的答案。以下内容仅供参考。

如果浏览器支持内容和计数器，

. foo { counter-reset: foo; ｝ .foo li { list-style-type:没有; ｝ .foo li::before { counter-increment: foo; 内容:“1.”counter(foo)“”; ｝ < ol class = " foo " > <李> uno李< / > <李> dos李< / > <李>非常李< / > <李>四弦吉他李< / > < / ol >

所选的答案是一个很好的开始，但它本质上强制list-style-position: inside;列表项的样式，使得换行文本难以阅读。下面是一个简单的解决方案，它还可以控制数字和文本之间的空白，并根据默认行为对数字进行右对齐。

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

本页上没有任何解决方案适用于所有级别和长(包装)段落。由于标记(1)的大小可变，实现一致的缩进确实很棘手。， 1.2, 1.10, 1.10.5，…);它不能只是“伪造”，甚至不能为每个可能的缩进级别预先计算边缘/填充。

我终于想出了一个解决方案，实际上工作，不需要任何JavaScript。

它在Firefox 32, Chromium 37, IE 9和Android浏览器上进行了测试。不能在ie7和之前版本上工作。

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

例子:

在JSFiddle上试试，在Gist上分叉。

我在添加编号列表到Python Markdown的TOC扩展。

我是这样做的:

.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }

我不确定这是正确的方法，但对我来说很有效。

这是正确的代码，如果你想第一个子李调整其他css的大小。

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

HTML文件。

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>