左对齐列表编号和文本

I'd like to left align both the numbers and the text in my <ol>. This is what I'm trying to accomplish:

我想在我的

中左对齐数字和文本。这就是我想要完成的事情：

For now, each <li> contains an <a>, but that can change. So far I tried putting left padding and then a text-indent on the <a>.

目前，每个

都包含一个，但可以改变。到目前为止，我尝试在上放左边填充然后文本缩进。

都包含一个，但可以改变。到目前为止，我尝试在上放左边填充然后文本缩进。

Here is my code as of now.

这是我现在的代码。

HTML:

HTML：

<ol class="dinosaurs">
    <li><a>Dinosaur</a></li>
    <li><a>Tyrannosaurus</a></li>
    <li><a>Camptosaurus</a></li>
</ol>

CSS:

CSS：

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

NOTE: I'm viewing the webpage in Chrome 23 on Windows 7.

注意：我正在Windows 7上的Chrome 23中查看网页。

4 个解决方案

#1

You could position the list elements like so:

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

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

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

which would yield http://jsfiddle.net/wBjud/2/

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

#2

This seems to work:

这似乎有效：

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

#3

Try adding padding-left: 0; to your style, and changing list-style-position: to outside if necessary.

尝试添加padding-left：0;根据你的风格，改变列表式的位置：必要时改为外部。

#4

You can fake it by using positioning, padding and margins.

您可以使用定位，填充和边距伪造它。

jsFiddle example

jsFiddle示例

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