html – 左对齐列表编号和文本

我想在我的< 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中查看网页.

解决方法

您可以像这样定位列表元素：

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

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

这将产生http://jsfiddle.net/wBjud/2/