arrange the ol list numbers to the left side

Question

Is it possible to arrange the ol list numbers (2 digit numbers) to start from the left side.

Usually it comes like this

But I need that to show like this

enter image description here

Could you clarify your question? The numbers float to the right by default: http://jsfiddle.net/Blender/UG5Y4/1/ — Blender, Sep 28 '12 at 07:11

score 3 · Accepted Answer · answered Sep 28 '12 at 07:19

May be you can use counter -increment for this. Write like this:

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

Check this http://jsfiddle.net/upc6b/

score 0 · Answer 2 · answered Sep 28 '12 at 07:16

0

You can use CSS counters:

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;
}

The only problem with this approach is that the width of the number area is fixed, so it will not expand as the number of elements grows.

Demo: http://jsfiddle.net/Blender/UG5Y4/2/

answered Sep 28 '12 at 07:16

Blender

289,723
53
439
496

Counters are not new to CSS3. – BoltClock Sep 28 '12 at 07:17
@BoltClock: Huh, I always thought they were. Thanks for the tip! – Blender Sep 28 '12 at 07:19

arrange the ol list numbers to the left side

2 Answers2