左对齐列表编号和文本

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 { counter-reset: item }
.dinosaurs li { display: block }
.dinosaurs li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  display: inline-block;
}

Answer 2

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

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

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

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

Answer 3

现有的答案都不适合我，但通过组合和构建它们，我发现了类似的方法，包括多行条目，不需要列表项内的任何标签：

ol {
    counter-reset: item;
}
li {
    display: block;
    margin-left: 1.7em;
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    margin-left: -1.7em;
}

看起来像这样： https: //jsfiddle.net/b3dayLzo/

我认为它可以通过将 放在 的li:before左边距来起作用li。

您可能想要一个不同的margin-left。

上没有类，ol因为在我的例子中，它出现在容器的样式中。