CSS有序列表 - 样式的数字，当li包含多行时，保持缩进

Question

已经询问并回答了这个问题的变种，但我找不到这个具体问题的答案......

我想在li， 给定 中的每个ol项目中设置每个li可能跨越的数字多行，以 维护缩进的方式。

例如 - 这是一个简单的，没有样式的例子：

<div style="width: 200px;">
  <ol>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
  </ol>
</div>

这会产生以下结果 - 请注意多行的正确缩进：

我尝试使用li:before设置数字样式：

ol {
  counter-reset: li;
  list-style: none;
}
li {
  counter-increment: li;
}
li:before {
  margin-right: 10px;
  content: counter(li) '.';
  width: 1.2em;
  display: inline-block;
}

<div style="width: 200px;">
  <ol>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
  </ol>
</div>

现在，我可以轻松设置数字样式，但多行上的缩进会丢失：

那么，我如何设置数字的样式， 和 保持适当的缩进？

Answer 1

使用此css。

li {
  counter-increment: li;
  padding-left: 30px;
}
li:before {
  margin-right: 10px;
  content: counter(li) '.';
  width: 1.2em;
  display: inline-block;
  margin-left: -30px;
}

Answer 2

您可以通过填充来在元素的左侧创建一些空格，使用:before从内容流中删除position: absolute元素，并将其放置在填充所创建的空间中。

ol {
  counter-reset: li;
  list-style: none;
}
li {
  counter-increment: li;
  /* Anchor all :before elements to their respective li */
  position: relative;
  padding-left: 1em;
}
li:before {
  content: counter(li) '.';
  width: 1.2em;
  display: inline-block;
  position:absolute;
  left: 0;
}

Answer 3

如果你不介意引入另一个元素，你可以将文本包装在一个范围内。

li {
  color: red;
}
li span {
  color: black;
}

<div style="width: 200px;">
  <ol>
    <li><span>blah blah blah blah blah blah blah blah blah blah</span></li>
    <li><span>blah</span></li>
  </ol>
</div>

Answer 4

您还可以更新display:以使用table值。

table-row值使元素的行为类似于<tr>，table-cell使元素的行为类似于<td>，确保列表的不同部分保持对齐。

ol {
  counter-reset: li;
  list-style: none;
}
li {
  counter-increment: li;
  display:table-row;
  
}
li:before {
  margin-right: 10px;
  content: counter(li) '.';
  width: 1.2em;
  display: table-cell;
}

<div style="width: 200px;">
  <ol>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
    <li>blah blah blah blah blah blah blah blah blah blah</li>
    <li>blah</li>
  </ol>
</div>