Left align numbers and list text

Question

I would like to leave the alignment of numbers and text in the <ol> . This is what I am trying to accomplish:

Currently, each <li> contains <a> , but this may change. So far I have tried to put the left pad, and then the indent text on <a> .

Here is my code for now.

HTML:

 <ol class="dinosaurs"> <li><a>Dinosaur</a></li> <li><a>Tyrannosaurus</a></li> <li><a>Camptosaurus</a></li> </ol> 

CSS

 .dinosaurs{ list-style-position: inside; } 

NOTE. I am viewing a webpage in Chrome 23 on Windows 7.

Answer 1

You can arrange the list items like this:

  .dinosaurs { list-style-position: inside; } .dinosaurs li{ position: relative; } .dinosaurs li a { position: absolute; left: 30px; } 

which will give http://jsfiddle.net/wBjud/2/

Answer 2

It works:

 .dinosaurs { counter-reset: item } .dinosaurs li { display: block } .dinosaurs li:before { content: counter(item) ". "; counter-increment: item; width: 2em; display: inline-block; } 

Answer 3

Try adding padding-left: 0; to your style and if necessary change list-style-position: to outside .

Answer 4

You can fake it using positioning, padding and margins.

JsFiddle example

 .dinosaurs { list-style-position: inside; position:relative; margin-left: -20px; } a { position:absolute; left:70px; }