UL. Установка отступов маркированного списка. Часть 1
Автор Иван Мензуркин (старший лаборант)   
21.01.2008 г.

Примеры для случая, когда маркеры списка расположены вне поля списка. Расположение маркеров определяется стилем list-style-position, в примерах он не задан, а по умолчанию принимает значение outside.

Пример ul1-1. Вид списка по умолчанию (никакие стили не заданы, кроме цвета фона).
6.x: устанавливает дополнительный отступ списка слева, до него и после.
FF 2.x: То же самое. Обратите внимание, что FF стиль list-style-position отображает как и надо (т.е. outside), но вот фон списка захватывает маркеры в отличие от IE!
Текст перед списком
  • Элемент списка 1
  • Элемент списка 2 для демонстрации того, когда маркер списка обтекается текстом, а когда нет
  • Элемент списка 3
  • Элемент списка 4
Текст после списка
Пример ul1-2. Указан явно один стиль "margin: 0".
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
Текст после списка

Просмотров: 7933

Коментарии (10)
 
Поведение огненной лисы в условиях проводимого эксперимента к настоящему моменту изучено не полностью. Как только получим результаты, дополним результирующую таблицу 8)... А вот и она :eek побежал ловить!
 
Иван Мензуркин, 19:55 21 января 2008 г.
 
С FireFox разобрались, результаты - в таблице (обратите внимание на первый и последний примеры) :)
 
Иван Мензуркин, 11:24 28 января 2008 г.
 
Как установить вместо стандартных круглешков Галочку???? 
например здесь http://www.shoptravelspb.ru/index.php/the-countries/41
 
Леонтий, 12:09 23 июня 2011 г.
 
Полезная информация, советую всем![ юмор, позитив, красивые фото, приколы и много интересного контента
 
Tryxy, 14:36 13 июня 2012 г.
 
All of these articles have saved me a lot of heahdcaes.
 
Natalia, 08:47 31 июля 2013 г.
 
This shows real exrsetipe. Thanks for the answer. http://pudhxutoc.com [url=http://hhpicl.com]hhpicl[/url] [link=http://gafhqdeezdx.com]gafhqdeezdx[/link]
 
Jackie, 23:48 10 августа 2013 г.
 
Есть небольшая проблема. У меня на сайте само меню и разделители получаются маркированными. Я со стилями не очень разбираюсь как убрать эти маркеры?
 
Леха, 09:45 03 октября 2013 г.
 
В файле CSS стилей шаблона укажи параметр "list-style: none;" для класса этих списков.
 
Админ, 13:46 04 октября 2013 г.
 
спасибо, получилось!!!
 
Леха, 17:47 04 октября 2013 г.
 
Мне нужно задать разметку тексту при помощи CSS, чтобы этот текст выглядел как список с маркерами. Один нюанс! Этот текст генерирует JavaScript как массив, то есть массив преобразуется в список. За такую разметку отвечает display:list-item? Я правильно понимаю или как?
 
Димка, 13:42 08 ноября 2013 г.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Последнее обновление ( 28.01.2008 г. )