Links richten Sie beide Listennummern und Text

Question

Ich möchte links die Zahlen und den Text in meinem <ol> ausrichten. Das ist, was ich versuche zu erreichen:

Vorerst jeder <li> eine <a> enthält, aber das kann sich ändern. Bisher habe ich versucht, linkes Padding und dann einen Text-Einzug auf die <a> zu setzen.

Hier ist mein Code ab sofort.

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

HINWEIS: Ich sehen die Web-Seite in Chrome 23 auf Windows 7.

Answer 1

Sie können die Listenelemente wie so positionieren:

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

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

die http://jsfiddle.net/wBjud/2/

Answer 2

Versuchen padding-left: 0; zu Ihrem Stil das Hinzufügen und Ändern list-style-position: bis outside falls erforderlich.

Answer 3

ergeben würden Sie fälschen kann es durch die Verwendung Positionierung, Polsterung und Margen.

jsFiddle example

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

Answer 4

Dies scheint zu funktionieren:

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