我手上有一个简单的 CSS 问题——<em>或者我是这么想的……</em>——我基本上只是想使用生成为列表标记的伪元素创建一个左对齐的列表 ( ul) 。::beforecontent: "» "
现在不管我尝试什么，尽管我根本无法重现此A List Apart: Taming Lists文章的结果。在链接到的示例中，列表正是我想要的样式。
我在此处的 JS Fiddle 中复制了该示例，该示例显示了未对齐文本的问题：http: //jsfiddle.net/jannis/f8TxN/
这里还有一张快速图片可以更好地说明这一点。左边是 ALA 的例子，右边是我的版本：
但是，正如您在 Fiddle 中看到的那样，li简单的第一行将不会与 this 中的其余文本左对齐li。
我真的很感激有人看看并告诉我我在这里做错了什么。
非常感谢您的阅读，
詹尼斯
这是导致问题的原因text-indent: -1em;。<ul>将其设置为固定值-13px可修复小提琴。
但是，根据生成内容的宽度，特别受font-size使用的影响，如果要继续使用em值，可能需要不同的值。px与当前字体无关。
只是为了text-indent使文本看起来是对齐的，因为作者知道会生成将第一行向前推进的内容。我假设选择的值适合使用任何浏览器和字体的原始文章。
将以下 CSS（来自 ALA 文章）复制到小提琴font-family: Verdana, sans-serif;font-size: 11px;中更正了我浏览器中的对齐方式。
在我看来，即使是 ALA 版本也有（几个？）像素，而且远非完美，尽管它们对您有相反的问题，第一行的文本比其他文本更深入。
我通过将以下内容从 -1em 更改为 -0.85em 来使您的示例生效：
text-indent: -0.85em;
即使使用不同的字体大小，这仍然有效。
看起来所用字符的宽度也被考虑在内，因此您的示例与 ALA 之间存在差异的原因甚至可能取决于所使用的字体。