將列表號和文本左對齊

Question

我想將左對齊號和我的<ol>中的文本。這就是我要完成的：

目前，每個<li>包含<a>，但可以改變。到目前爲止，我嘗試了在左邊的填充，然後在<a>上進行文本縮進。

這是我現在的代碼。

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

注：我在Windows 7上瀏覽網頁在Chrome 23

Answer 1

你可以定位列表中的元素，像這樣：

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

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

這將產生http://jsfiddle.net/wBjud/2/

Answer 2

嘗試增加padding-left: 0;你的風格，並改變如有必要，可以使用list-style-position:至outside。

Answer 3

您可以僞造它通過使用定位，填充和利潤。

jsFiddle example

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

Answer 4

這似乎工作：

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