如何通过CSS保持有序列表中第二行的缩进？

Question

我想有一个“内部”列表与列表项目符号或十进制数字是所有与上级文本块齐平。第二行列表条目必须与第一行相同的缩进！

例如：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. 

CSS只为它的“list-style-position”提供了两个值--内部和外部。对于“内部”，第二行与列表点齐平，而不是与上级行齐平：

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

宽度“外部”我的列表不再与高级文本块齐平。

实验宽度文本缩进、向左填充和向左边距对无序列表有效，但对有序列表失败，因为它取决于列表十进制的字符数：

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

“11。”和“12”与“3”相比，与高级文本块不齐。和“4.”。

那么有序列表和第二行缩进的秘密在哪里呢？谢谢你的努力！

Answer 1

这个答案已经过时了。你可以更简单地做到这一点，正如下面的另一个答案所指出的：

ul {
  list-style-position: outside;
}

参见https://www.w3schools.com/cssref/pr_list-style-position.asp

我很惊讶看到这件事还没解决。您可以像这样利用浏览器的表格布局算法（不使用表格）：

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

演示:http://jsfidle.net/4rnnk/1/

要使其在IE8中工作，请使用带有一个冒号的遗留:before表示法。