Упорядоченные списки
Теперь необходимо рассмотреть такую же проблему в применении к упорядоченным спискам. Они немного сложнее, так как числовые маркеры выравниваются согласно пункту списка с самым большим числовым значением. Например, если имеется десять пунктов списка, десятичные значения будут размещены так, чтобы можно было вывести пункт "10", как показано на рис. 32.9:
Рис. 32.9. Числовые маркеры пунктов 1-9 имеют дополнительное заполнение, чтобы они выравнивались справа с пунктом 10
Поэтому, в действительности не существует способа сделать согласованное выравнивание слева с той же позиций, что и окружающий текст, если только не задать для списка list-style-type: decimal-leading-zero;, что скрывает проблему, как видно на рис. 32.10:
Рис. 32.10. Ведущие нули заполняют пространство для пунктов 1-9
Обычно принято просто оставлять различное расстояние. Однако это означает, что маркеры упорядоченных и неупорядоченных списков нельзя без проблем согласованно выровнять слева. Можно только выровнять текст списков:
ul, ol {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 2em;
}
Требуется как минимум 2em левого поля, чтобы разместить как упорядоченные, так и неупорядоченные списки. На рис. 32.11 обратите внимание на то, как текст пунктов выравнивается в обоих списках:
Рис. 32.11. Текст выравнивается в упорядоченном и неупорядоченном списках
Итак, что делать?
По сути, имеется три возможности:
Оставить используемое по умолчанию размещение списков и их маркеров
Явно выровнять текст списков
Задать другой стиль для ul и ol
Не существует "правильного" или "неправильного" подхода, и вполне допустимо оставить просто в обычном контенте настройки для списков по умолчанию.
Использование list-style-position
Если требуется, чтобы текст многострочных пунктов списка заворачивался под маркер списка, необходимо задать свойство list-style-position как inside, что создает результат, который можно видеть на рис. 32.12:
Рис. 32.12.
Внутреннее размещение маркеров не особенно популярный стиль оформления. По умолчанию list-style-position задается как outside, что создает результаты, которые рассматриваются в других местах этой статьи.
Что насчет списков определений?
Обычно списки определений не требуют большого внимания, за исключением задания стиля dt (обычно жирный текст) и управления отступом определений:
dt {
font-weight: bold;
}
dd {
margin-left: 2em;
}
Это задает четкое и простое оформление списков определений, как на рис. 32.13:
Рис. 32.13. Оформленный список определений
Хотя списки определений можно реорганизовать с помощью плавающих элементов и позиционирования, они будут слишком странными, и обычно лучше сохранять все простым. Они достаточно полезны как они есть, просто с небольшим изменением, чтобы сильнее выделить термины определений, и сделать для определений хорошие отступы.
Вложенные списки
В статье 16 о списках HTML были рассмотрены вложенные списки. При создании кода CSS необходимо быть внимательным при поддержании четкой ключевой информации, чтобы показать отношение между вложенным списком и содержащим его списком. Несомненно, наиболее распространенным способом для этого является использование отступов для пунктов вложенного списка - это, фактически, настройка по умолчанию в различных браузерах.
Если вы задаете свой собственный отступ списка, базовая настройка будет просто умножаться. Например, рассмотрим следующий код CSS:
ul, ol {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 2em;
}
Каждый пункт последующего списка потомка в цепочке наследует значение полей своего пункта списка предка, в дополнение к имеющимся своим собственным 2em. Поэтому пункт списка верхнего уровня (который не имеет пункта списка в качестве элемента предка) будет иметь левое поле 2 em, а пункт списка потомка первого пункта списка будет наследовать 2em от своего предка, и затем добавляет 2em, получая всего 4em ... и т.д.