左对齐列表编号和文本

Question

我想将<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;
}

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

Answer 1

这似乎有效：

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

Answer 2

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

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

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

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

Answer 3

尝试在您的样式中添加padding-left: 0;，并在必要时将list-style-position:更改为outside。

Answer 4

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

<强> jsFiddle example

.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上没有类，因为在我的情况下，它出现在容器的样式内。

Answer 6

如果使用list-style-position: inside;，则数字将放置在文本块内。要调整数字的位置并保持文本的一致性，请使用此CSS。

ol {
  list-style: none;
  counter-reset: step-counter;
  padding-inline-start: 25px;
}
ol > li {
  counter-increment: step-counter;
}
ol > li:before {
  content: counter(step-counter)".";
  display: inline-block;
  position: absolute;
  margin-left: -25px;
}

将子弹也保持在左侧

ul {
  list-style: none;
  padding-inline-start: 25px;
}
ul > li:before {
  content: '\25cf';
  position: absolute;
  margin-left: -25px;
}