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

Question

已经提出并回答了这个问题的各种形式，但是我找不到这个特定问题的答案...

我想在ol中为每个li项目中的数字设置样式， 以使每个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

您可以通过对元素进行填充来在其左侧留出一些空间，从内容流中使用position: absolute移除:before元素，然后将其放置在由填充创建的空间中。

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>