CSS: Почему отступы этих элементов списка не выстраиваются в линию?

Question

У меня простой вопрос CSS на моих руках здесь - или я так думал ... - где я в основном просто хочу, чтобы создать красиво выравнивание по левому краю список (ul) с использованием ::before псевдо элементов с генерируемым content: "» " в список маркеров ,

Теперь вопрос, что я пытаюсь, хотя я просто не могу воспроизвести результаты из этой статьи A List Apart: Taming Lists. В приведенном в примере примере список - это именно то, как я хотел бы стилизовать мой.

Я воспроизводил пример в JS Fiddle здесь, который показывает вопрос о смещенном тексте: http://jsfiddle.net/jannis/f8TxN/

Здесь также является быстрым изображение, чтобы проиллюстрировать эту точку лучше. Пример из ALA на левой стороне, моя версия справа:

Однако, как вы будете в состоянии видеть в Fiddle, первая строка в li просто не Выровнять по левому краю с остальной части текст в пределах этого li.

Я бы очень признателен, если кто-то взглянет и расскажет мне, что я здесь делаю неправильно.

Большое спасибо за чтение,

Jannis

Answer 1

Это text-indent: -1em; на <ul>, что вызывает проблему. Установка фиксированного значения -13px фиксирует скрипку.

Однако, в зависимости от ширины генерируемого содержимого, которое особенно пострадавших от font-size используемых, возможно, потребуется другое значение, если вы хотите продолжать использовать значение эм. px не связано с текущим шрифтом.

text-indent был добавлен только так, что текст будет выровнен, потому что автор знал, что будет создан контент, который будет продвигать первую строку вперед. Я предполагаю, что выбранное значение соответствовало оригинальной статье о том, какой браузер и шрифт используются.

Копирование следующего CSS (из статьи ALA) в скрипт font-family: Verdana, sans-serif;font-size: 11px; скорректировало выравнивание в моем браузере.

Answer 2

На мой взгляд, даже версия ALA представляет собой (несколько?) Пикселей и нигде не близка к совершенству, хотя у них есть обратная проблема для вас, где текст на первой строке находится дальше, чем остальные.

Я получил ваш пример работать, изменяя следующие из -1em в -0.85em:

text-indent: -0.85em; 

Даже с другим размером шрифта, это по-прежнему работает.

Похоже, что ширина используемого символа также учитывается, поэтому причина разницы между вашим примером и ALA может даже снизиться до используемого шрифта.