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

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只为它的“list-style-position”提供了两个值——内部和外部。在“inside”中，第二行与列表点齐平，而不是与上一行齐平:

在有序列表中，如果你给“list-style-position”赋值“inside”，那么长列表项的第二行将没有缩进，而是回到列表的左边缘(即它将与该项的编号左对齐)。这是有序列表所特有的，在无序列表中不会发生。

如果将"list-style-position"的值改为"outside"，那么第二行缩进将与第一行相同。

我有一个带边界的列表，遇到了这个问题。当“list-style-position”设置为“inside”时，我的列表看起来并不像我想要的那样。但是当“list-style-position”设置为“outside”时，列表项的数量就落在了框外。

我通过简单地为整个列表设置一个更大的左距来解决这个问题，这将整个列表推向右边，回到它之前的位置。

CSS:

ol。classname{保证金:0;填充:0;}

ol。}类名li {margin:0.5em 0 0 0;padding-left:0;

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

更新

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

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符号加一个冒号。

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

你可以使用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/

我相信这能满足你的需要。

.cssClass li {
  list-style-type: disc;
  list-style-position: inside;
  text-indent: -1em;
  padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/