UL. Установка отступов маркированного списка. Часть 1 |
|
|
Автор Иван Мензуркин (старший лаборант)
|
21.01.2008 г. |
Примеры для случая, когда маркеры списка расположены вне поля списка. Расположение маркеров определяется стилем list-style-position, в примерах он не задан, а по умолчанию принимает значение outside.
Пример ul1-1. Вид списка по умолчанию (никакие стили не заданы, кроме цвета фона).
IЕ 6.x:
устанавливает дополнительный отступ списка слева, до него и после.
FF 2.x: То же самое. Обратите внимание, что FF стиль list-style-position отображает как и надо (т.е. outside), но вот фон списка захватывает маркеры в отличие от IE! |
Текст перед списком
- Элемент списка 1
- Элемент списка 2 для демонстрации того, когда маркер списка обтекается текстом, а когда нет
- Элемент списка 3
- Элемент списка 4
Текст после списка |
Пример ul1-2. Указан явно один стиль "margin: 0".
IЕ 6.x: обратите внимание, что маркеры списка куда-то пропали! Они просто ушли за левую границу контейнера (ячейки таблицы) и ИЕ их не показывает. Посмотрите страницу в Мозилле и почувствуйте разницу!
FF 2.x: отступов сверху и снизу теперь нет, а вот отступ слева остался |
Текст перед списком
- Элемент списка 1
- Элемент списка 2 для демонстрации того, когда маркер списка обтекается текстом, а когда нет
- Элемент списка 3
- Элемент списка 4
Текст после списка |
Пример ul1-3. Экспериментируем с ИЕ. Установим "margin: 14px" и увидим, что маркеры стали на половину видны! |
Текст перед списком
- Элемент списка 1
- Элемент списка 2 для демонстрации того, когда маркер списка обтекается текстом, а когда нет
- Элемент списка 3
- Элемент списка 4
Текст после списка |
Пример ul1-4. Изменяем настройки отступов списка, задаваемые браузерами по умолчанию, чтобы список выглядел однообразно: "margin: 0 0 0 20px"
FF 2.x: отступ списка слева все равно большой и отличается от ИЕ? Для полной идентичности надо явно указать стиль padding, что и сделано в примере 5 (следующий) |
Текст перед списком
- Элемент списка 1
- Элемент списка 2 для демонстрации того, когда маркер списка обтекается текстом, а когда нет
- Элемент списка 3
- Элемент списка 4
Текст после списка |
Пример ul1-5. Отступы списка выглядят однообразно!
(применили стиль "margin: 0 0 0 20px; padding: 0")
FF 2.x: Чудо - маркеры теперь тоже вне поля списка. Похоже - это результат применения стиля "padding: 0" |
Текст перед списком
- Элемент списка 1
- Элемент списка 2 для демонстрации того, когда маркер списка обтекается текстом, а когда нет
- Элемент списка 3
- Элемент списка 4
Текст после списка |
Просмотров: 9788
|
Последнее обновление ( 28.01.2008 г. )
|