左对齐列表编号和文本 [英] Left align both list numbers and text

问题描述

我想在< ol> 中将数字和文字对齐。这正是我想要完成的工作：

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

现在，每个< li> 包含 ; a> ，但是可以改变。到目前为止，我试图把左填充，然后一个文本缩进< a> 。

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>.

这是我现在的代码。

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中查看网页。 / p>

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

推荐答案

您可以将列表元素放置如下：

You could position the list elements like so:

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

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

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

这篇关于左对齐列表编号和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！