html - 为嵌套的 `counter(item)` 对齐 `ol`

Question

我嵌套了一些 ol 并使用 counter(item) 来设置列表项的样式。顶级 ol 具有标准小数，而 ol ol > li:before 的样式为 content: counter(item,lower-roman) "。 ";

当我这样做时，内部列表项有奇怪的缩进，因为 li:before 有不同的宽度(i.，vs ii.、iii.等)

如何对齐内部列表的文本？

https://jsfiddle.net/k1s2j3ps/

Answer 1

你可以在柜台上设置一个min-width，像这样:

ol ol > li:before {
    content: counter(item, lower-roman) ". ";
    counter-increment: item;
    min-width: 20px; /* <--- */
    display: inline-block; /* <--- */
}

ol {
  counter-reset: item;
}
ol > li {
  display: block;
  margin-bottom: 10px;
}
ol > li:before {
  content: counter(item) ". ";
  counter-increment: item;
}
ol ol {
  font-size: 1em;
}
ol ol > li:before {
  content: counter(item,lower-roman) ". ";
  counter-increment: item;
  min-width: 20px;
  display: inline-block;
}

<ol>
  <li>This</li>
  <li>That</li>
  <li>
    A description of the list to follow:
    <ol>
      <li>text</li>
      <li>indented</li>
      <li>within</li>
    </ol>
  </li>
</ol>