左对齐两个列表数字和文本(Left align both list numbers and text

我想离开对准这两个数字和我的文字<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;
}

注：我在浏览网页的Chrome 23在Windows 7上。

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:

这似乎工作：

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

Answer 3:

尝试添加padding-left: 0; 你的风格，并改变list-style-position:到outside ，如果必要的。

Answer 4:

您可以通过使用定位，填充和利润捏造事实。

例如的jsfiddle

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

Answer 5:

现有的答案都不为我工作，而是通过组合和建筑上他们，我发现，确实，包括多条目类似的方法，而不需要内部列表项的任何标签：

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 ，因为在我的情况，这似乎容器的样式中。

文章来源: Left align both list numbers and text