将ol列表编号排列在左侧

时间:2012-09-28 07:06:39

标签: html css css3 html-lists

是否可以从左侧开始排列ol列表编号(2位数字)。

通常它就像这样

1
2
.
.
10
12

但我需要像这样显示

enter image description here

2 个答案:

答案 0 :(得分:3)

可能您可以使用反向增量。写得像这样:

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/

答案 1 :(得分:0)

您可以使用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/