CSS:为什么这些列表元素的缩进不对齐？

Question

我这里有一个简单的 CSS 问题 —或者我想……— 我基本上只想创建一个很好的左对齐列表(ul) 使用 ::before 伪元素和生成的 content: "» " 作为列表标记。

尽管我无法重现此 A List Apart: Taming Lists 的结果，但现在无论我尝试什么文章。在示例链接中，列表正是我想要的样式。

我在此处的 JS Fiddle 中复制了示例，它显示了文本未对齐的问题:http://jsfiddle.net/jannis/f8TxN/

这里还有一张快速图片可以更好地说明这一点。左边是 ALA 的例子，右边是我的版本:

然而，正如您将能够在 Fiddle 中看到的那样，li 中的第一行根本不会与此 li 中的其余文本左对齐。

我真的很感激有人看一下并告诉我我在这里做错了什么。

非常感谢阅读，

詹尼斯

Answer 1

这是text-indent: -1em;在 <ul> 上这是导致问题的原因。将其设置为固定值 -13px修复 fiddle 。

但是，取决于生成内容的宽度，这尤其受 font-size 的影响。 used，如果您想继续使用 em 值，则可能需要不同的值。 px 与当前字体无关。

text-indent添加只是为了使文本看起来对齐，因为作者知道会生成将第一行向前推的内容。我假设所选择的值适合原始文章所使用的任何浏览器和字体。

将以下 CSS(来自 ALA 文章)复制到 fiddle font-family: Verdana, sans-serif;font-size: 11px;更正了我浏览器中的对齐方式。