CSS：为什么这些列表元素的缩进没有对齐？

我手头上有一个简单的CSS问题——或者我是这么想的……——我基本上只想创建一个左对齐的列表（

ul

），使用

：：before

伪元素和生成的

内容：“»”

作为列表标记

不管我怎么做，我都无法重现本文的结果。在链接到示例中，列表正是我想要的样式

我在这里用JS小提琴复制了这个例子，它显示了文本不对齐的问题：

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

但是，正如您可以在小提琴中看到的那样，

li

中的第一行不会与该

li

中的其余文本左对齐

如果有人能看看我，告诉我我做错了什么，我将不胜感激

非常感谢您的阅读

---

Jannis

这是

文本缩进：-1em

上的code>。将其设置为固定值

-13px

可修复小提琴

但是，根据生成内容的宽度（尤其受使用的

字体大小的影响），如果要继续使用em值，可能需要不同的值px与当前字体无关

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

将以下CSS（来自ALA文章）复制到fiddle
字体系列中：Verdana，sans serif；字体大小：11px更正了我的浏览器中的对齐方式。
在我看来，即使是ALA版本也只有（几？）个像素，还远远不够完美，尽管它们与您的问题相反，第一行的文本比其他行的更深入

我通过将以下内容从-1em更改为-0.85em，使您的示例得以运行：

text-indent: -0.85em;

即使使用不同的字体大小，这仍然有效

看起来使用的字符的宽度也被考虑在内，所以您的示例和ALA之间存在差异的原因甚至可以归结为使用的字体