左对齐列表数字和文本

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

<ol class="dinosaurs">
  <li>Brontosaurus</li>
  <li>Triceratops</li>
  <li>Tyrannosaurus</li>
  <li>Velociraptor</li>
  <li>Stegosaurus</li>
  <li>Brachiosaurus</li>
  <li>Nigersaurus</li>
  <li>Giganotosaurus</li>
  <li>Archaeopteryx</li>
  <li>Diplodocus</li>
</ol>

Answer 2

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

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

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

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