将列表号和文本左对齐

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