Wyrównanie w lewo zarówno numerów list, jak i tekstu

Question

Chciałbym wyrównać zarówno liczby, jak i tekst w moim <ol>. To, co próbuję wykonać:

Teraz każdy <li> zawiera <a>, ale to może się zmienić. Do tej pory próbowałem wstawić lewe dopełnienie, a następnie tekstowe wcięcie na <a>.

Oto mój kod od teraz.

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

UWAGA: Mam przeglądania strony internetowej w Chrome 23 na Windows 7.

Answer 1

Można pozycjonować elementy listy tak:

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

.dinosaurs li{ 
    position: relative; 
} 
.dinosaurs li a { 
    position: absolute; 
    left: 30px; 
} 

który przyniósłby http://jsfiddle.net/wBjud/2/

Answer 2

spróbuj dodać padding-left: 0; do swojego stylu i zmieniając list-style-position: do outside, jeśli to konieczne.

Answer 3

Można udawać za pomocą pozycjonowania, dopełnienie i marginesy.

jsFiddle example

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

Answer 4

To wydaje się działać:

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