html - olリスト番号を左側に配置します

Question

olリスト番号（2桁の番号）を左側から順に並べることはできますか？

通常はこのようになります

1
2
.
.
10
12

しかし、私はこのように表示するためにそれが必要です

Answer 1

これにはcounter-incrementを使用できるかもしれません。このように書いてください：

ul{    counter-reset: chapter 0;  }
li:before{    
    counter-increment: chapter;    
    content:counter(chapter) ". ";
    width:20px;
    display: inline-block;
    text-align: right;   
}  

これをチェックしてくださいhttp://jsfiddle.net/upc6b/

Answer 2

CSSカウンターを使用できます。

CSS：

ol {
    padding-left: 40px;
    list-style: none;
    counter-reset: number;
}

ol li:before {
    display: inline-block;

    content: counter(number) '.';
    counter-increment: number;

    width: 30px;
}

このアプローチの唯一の問題は、数値領域の幅が固定されているため、要素の数が増えても拡大しないことです。

デモ： http： //jsfiddle.net/Blender/UG5Y4/2/