Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Поля и заполнение списков





Разумное использование полей и заполнения может придать виду списка более профессиональный и безупречный вид, но вы должны знать, что делаете, и помнить также, что ситуация может отличаться для различных типов списков. В этом разделе мы рассмотрим применение разумных полей и заполнения для двух наиболее распространенных типов списков.

Неупорядоченные списки

Один момент, который можно заметить достаточно быстро, состоит в том, что используемый по умолчанию стиль оформления списков, делает для них отступ больше, чем используемый по умолчанию стиль для параграфов - см. рис. 32.6:


Рис. 32.6. Оформленные по умолчанию списки имеют отступ слева

Если требуется, чтобы пункты неупорядоченного списка находились в той же точке выравнивания слева, что и остальной контент, понадобится задать несколько стилей для управления отступом в соответствии с требованиями. Различные браузеры требуют различных настроек - некоторым требуется удаление полей, для других нужно удалить заполнение. Поэтому, чтобы удовлетворить все браузеры, обнуляем оба значения:

ul { margin: 0; padding: 0;}

Это может создавать не тот результат, который ожидается, так как текст будет прижат влево, а маркеры будут располагаться за пределами текста, как показано на рис. 32.7:


Рис. 32.7. Маркеры располагаются слева от текста.

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

ul { margin-left: 0; padding-left: 0;} ul li { margin-left: 1em;}

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


Рис. 32.8. Маркеры выровнены в соответствии с окружающими параграфами



Упорядоченные списки

Теперь необходимо рассмотреть такую же проблему в применении к упорядоченным спискам. Они немного сложнее, так как числовые маркеры выравниваются согласно пункту списка с самым большим числовым значением. Например, если имеется десять пунктов списка, десятичные значения будут размещены так, чтобы можно было вывести пункт "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. Текст выравнивается в упорядоченном и неупорядоченном списках

Итак, что делать?

По сути, имеется три возможности:

1. Оставить используемое по умолчанию размещение списков и их маркеров

2. Явно выровнять текст списков

3. Задать другой стиль для ul и ol

Не существует "правильного" или "неправильного" подхода, и вполне допустимо оставить просто в обычном контенте настройки для списков по умолчанию.

Использование list-style-position

Если требуется, чтобы текст многострочных пунктов списка заворачивался под маркер списка, необходимо задать свойство list-style-position как inside, что создает результат, который можно видеть на рис. 32.12:


Рис. 32.12.

Внутреннее размещение маркеров не особенно популярный стиль оформления. По умолчанию list-style-position задается какoutside, что создает результаты, которые рассматриваются в других местах этой статьи.









Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2021 zdamsam.ru Размещенные материалы защищены законодательством РФ.