如果你想，ol, ul列表也可以工作，你也可以在css中使用一个带border: none的表。

我自己就很喜欢这个解决方案:

ul {
  list-style-position: inside;
  list-style-type: disc;
  font-size: 12px;
  line-height: 1.4em;
  padding: 0 1em;
}

ul li {
  margin: 0 0 0 1em;
  padding: 0 0 0 1em;
  text-indent: -2em;
}

你可以使用CSS来选择一个范围;在本例中，您需要列表1-9项:

ol li:nth-child(n+1):nth-child(-n+9) 

然后适当调整第一项的页边距:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

在这里查看它的实际操作:http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

更新

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

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://jsfiddle.net/4rnNK/1/

为了让它在IE8中工作，使用legacy:before符号加一个冒号。

我有同样的问题，并开始使用user123444555621的答案。但是，我还需要为每个li添加填充和边框，这是该解决方案不允许的，因为每个li是一个表行。

首先，我们使用一个计数器来复制ol的数字。

然后我们设置display: table;在每个li和display: table单元格上的:之前给我们的缩进。

最后是棘手的部分。因为我们没有为整个ol使用表格布局，我们需要确保每个:before是相同的宽度。我们可以使用ch单位来大致保持宽度等于字符数。为了在:before的位数不同时保持宽度一致，我们可以实现数量查询。假设你知道你的列表不会有100个或更多的项目，你只需要一个数量查询规则来告诉:在改变它的宽度之前，但你可以很容易地添加更多。

ol { counter-reset: ol-num; margin: 0; padding: 0; } ol li { counter-increment: ol-num; display: table; padding: 0.2em 0.4em; border-bottom: solid 1px gray; } ol li:before { content: counter(ol-num) "."; display: table-cell; width: 2ch; /* approximately two characters wide */ padding-right: 0.4em; text-align: right; } /* two digits */ ol li:nth-last-child(n+10):before, ol li:nth-last-child(n+10) ~ li:before { width: 3ch; } /* three digits */ ol li:nth-last-child(n+100):before, ol li:nth-last-child(n+100) ~ li:before { width: 4ch; } <ol> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> </ol>

我相信你只需要把列表“子弹”之外的填充物。

li {
  list-style-position: outside;
  padding-left: 1em;
}