Компоновка списка

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

Расстояние между маркером и содержимым элемента списка в CSS не определено, и CSS2.1 не обеспечивает возможности влиять на это расстояние. Любопытно, что CSS2 делает это, о чем кратко рассказывается далее, во врезке «Позиционирование маркеров списка». Маркеры, находящиеся вне содержимого элементов списка, не оказывают влияния ни на компоновку других элементов, ни даже на компоновку самих элементов списка. Они просто располагаются на определенном расстоянии от края содержимого, и как бы ни перемещался край содержимого, маркер следует за ним. Маркер ведет себя так, будто он абсолютно позиционирован относительно содержимого элемента списка, примерно следующим образом: position: absolute; left: -1.5em;.

Когда маркер расположен внутри, он ведет себя как строковый элемент, находящийся в начале содержимого.


Осталось добавить фактический контейнер списка; иначе говоря, на рисунках не представлены ни элемент ul, ни элемент ol. Его можно добавить (он обозначен пунктирной рамкой).

Как и элементы списка, элемент «список» – это блочный контейнер, который заключает в себе свои элементы-потомки. Однако, как видите, маркеры размещаются не только вне содержимого элементов списка, но также и вне области содержимого элемента «список». Обычное «структурированное расположение», которого можно было бы ожидать от списков, еще не определено. Большинство броузеров на момент написания данной книги реализуют структурированное расположение элементов списка за счет отступов или полей их спискаконтейнера. Например, агент пользователя мог бы применить такое правило:

ul, ol {margin-left: 40px;}

Это правило реализовано в Internet Explorer и Opera. А большинство броузеров компании Netscape Communications применяют такое правило:

ul, ol {padding-left: 40px;}

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


Лучше было бы использовать что-то вроде 2.5em, поскольку при этом происходило бы масштабирование структурирующих отступов при изменении размера текста. Авторам, желающим изменить величину структурирующих отступов списков, я настоятельно рекомендую задавать и отступы, и поля, что-бы обеспечить совместимость с различными броузерами. Например, для того чтобы структурировать список при помощи отступов, примените такое правило:

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

А если предпочитаете поля, напишите примерно следующее:

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

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Вставка генерируемого содержимого
Вставка значений атрибутов
Генерируемое содержимое
Генерируемые кавычки
Изображения для элементов списка