具有 CSS 属性的解决方案
我们可以使用浏览器的表格布局算法，而无需使用如下表格。
在下面的示例中，我们将 <ol> 元素的显示设置为“table”并添加了 counter-reset 属性。
然后，我们将 <li> 元素的显示设置为“table-row”，并使用 list-style 和 counter-increment 属性。
最后，我们将 ::before 伪元素添加到 <li> 元素并通过将显示设置为“table-cell”并指定 text-align 和 padding-right 属性来设置样式。
为有序列表的第二行添加缩进的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ol,
li {
margin: 0;
padding: 0;
}
ol {
counter-reset: list;
display: table;
}
li {
list-style: none;
counter-increment: list;
display: table-row;
}
li::before {
content: counter(list) ".";
display: table-cell;
text-align: right;
padding-right: 1em;
}
</style>
</head>
<body>
<p>
经历过风雨，才懂得阳光的温暖。
</p>
<ol>
<li>
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
</li>
<li>
生活终归还得继续。
</li>
<li>
经历过风雨，才懂得阳光的温暖。
</li>
<li>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</li>
<li>
把痛苦停在昨天 把微笑留给明天。
</li>
</ol>
</body>
</html>
日期：2020-06-02 22:14:55 来源：oir作者：oir