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

问题描述

我想离开对齐两个数字，在我的＆LT文本; OL＆GT; 。这就是我要完成的：

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/

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