CODEWITHSUNDEEP
htmlcsshtml-lists
Sowmya
Sowmya

Reputation: 26969

arrange the ol list numbers to the left side

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

Usually it comes like this

1
2
.
.
10
12

But I need that to show like this

enter image description here

Upvotes: 2

Views: 630

Answers (2)

sandeep
sandeep

Reputation: 92793

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/

Upvotes: 3

Blender
Blender

Reputation: 298196

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/

Upvotes: 0

Related Questions