Sinistra allinea entrambi i numeri di elenco e il testo

Question

Vorrei allineare sia i numeri che il testo nel mio <ol>. Questo è quello che sto cercando di realizzare:

Per ora, ogni <li> contiene un <a>, ma questo può cambiare. Finora ho provato a mettere il pad sinistro e quindi un trattino di testo sullo <a>.

Ecco il mio codice al momento.

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

NOTA: sto vedendo la pagina web in Chrome 23 su Windows 7.

Answer 1

È possibile posizionare gli elementi della lista in questo modo:

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

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

quale dovrebbe fornire http://jsfiddle.net/wBjud/2/

Answer 2

Prova ad aggiungere padding-left: 0; al vostro stile, e cambiando list-style-position: a outside se necessario.

Answer 3

Si può fingere mediante il posizionamento, padding e margini.

jsFiddle example

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

Answer 4

Questo sembra funzionare:

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