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

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;
}

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

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;
}

更新

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

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

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;">

我的解决方案与Pumbaa80的解决方案完全相同，但我建议对于li元素使用display:table而不是display:table-row。 所以它是这样的:

ol {
  counter-reset: foo; /* default display:list-item */
}

ol > li {
  counter-increment: foo;
  display: table; /* instead of table-row */
}

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

现在我们可以用边距表示li之间的间距

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