我如何用带符号替换有序列表中的句点并仍然保持适当的缩进？

Question

我正在尝试对有序列表进行样式设置，以使数字与左边距对齐，用句点代替句点，并均匀缩进列表项的内容。我已经很接近了：

这使用以下CSS：

ol {
    counter-reset: list;
    padding: 0;
    margin-left: 2em;
}
ol > li {
    list-style: none; /* remove this line and you can see the 'real' numbering */
}
ol > li:before {
    content: counter(list) "— ";
    counter-increment: list;
    margin-left: -2em;
}

但是这只是li的左边距样式：在这之前，它看起来是这样，一旦数字超过10，就停止工作。换成其他字符的破折号也会破坏它。

有没有办法做到这一点？

Answer 1

将padding-left添加到ol，将伪元素设置为display:inline-block，为所需的最大字符数设置足够的宽度，然后应用text-align:right。

根据需要编辑您的值

ol {
  counter-reset: list;
  padding: 0;
  padding-left: 4em;
  margin: 1em;
}

ol>li {
  list-style: none;
  /* remove this line and you can see the 'real' numbering */
}

ol>li:before {
  content: counter(list) "— ";
  counter-increment: list;
  margin-left: -4em;
  width: 2.5em;
  display: inline-block;
  text-align: right;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos commodi perferendis nobis optio quaerat eveniet minus odio accusamus quo eos assumenda totam itaque ullam, voluptate sed! Dicta quae repudiandae voluptate debitis earum quis culpa, quas labore, reiciendis perspiciatis cum corporis exercitationem error expedita deserunt est vero quasi enim harum nisi.</p>
<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
</ol>