左对齐两个列表数字和文本文本、两个、数字、列表

2023-09-11 07:48:01 作者:秋江夜泊斜

我想离开对齐两个数字,在我的&LT文本; OL> 。这就是我要完成的:

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

目前,每个&LT;李&GT; 包含一个&LT; A&GT; ,但可以改变。到目前为止,我试图把左填充,然后在℃的文本缩进; A&GT;

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

下面是我的code截至目前。

Here is my code as of now.

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

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/