html - 左对齐列表编号和文本

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

现有的答案都不适合我，但通过组合和构建它们，我发现了类似的方法，包括多行条目，不需要列表项内的任何标签：

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 4

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

Answer 5

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

jsFiddle 示例

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

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;
}