Question

我手上有一个简单的CSS问题 - 左右我想...... - 我基本上只想创建一个很好的左对齐列表（{ {1}}）使用生成ul的{{1}}个伪元素作为列表标记。

现在我的尝试很重要，但我无法重现这篇A List Apart: Taming Lists文章的结果。在链接到示例中，列表正是我想要设计我的样式。

我在JS小提琴中复制了这个例子，其中显示了错位文本的问题：http://jsfiddle.net/jannis/f8TxN/

这里还有一个快速图像来更好地说明这一点。左边是ALA的例子，右边是我的版本：

List Misalignment

然而，正如您将能够在小提琴中看到的那样，::before中的第一行根本不会与此content: "» "中的其余文本左对齐。

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

非常感谢阅读，

Jannis

Answer 1

导致问题的是text-indent: -1em;上的<ul>。将其设置为固定值-13px可以解决问题。

但是，根据所生成内容的宽度（尤其受所使用的font-size影响），如果要继续使用 em 值，则可能需要不同的值。 px 与当前字体无关。

仅添加text-indent以便文本看起来是对齐的，因为作者知道会生成内容以推动第一行前进。我假设选择的值适合原始文章，无论使用何种浏览器和字体。

将以下CSS（来自ALA文章）复制到小提琴font-family: Verdana, sans-serif;font-size: 11px;中，纠正了浏览器中的对齐方式。

Answer 2

在我看来，即使ALA版本也是一个（几个？）像素，并且远远不够完美，尽管它们对你有相反的问题，第一行的文字比其余部分更远。

我通过将以下内容从-1em更改为-0.85em来实现工作：

text-indent: -0.85em;

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

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