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 的影响。使用过，如果您想继续使用 em 值，则可能需要不同的值。 px与当前字体无关。

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

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