Как сделать расстояние между элементами списка css
Перейти к содержимому

Как сделать расстояние между элементами списка css

  • автор:

Как разместить пункты списка горизонтально?

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).

Пример 1. Горизонтальный список

Результат данного примера показан на рис. 1.

Горизонтальный список

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .

Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.

См. также

  • display
  • display в CSS
  • Блочные элементы
  • Использование в вёрстке
  • Описание float
  • Открываем блочную модель
  • Создание флексбоксов
  • Спойлер
  • Строчно-блочные элементы
  • Строчные элементы

Как увеличить расстояние от маркера до текста?

Изменить в маркированном списке расстояние между маркером и текстом после него.

Решение

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI , как показано в примере 1.

Пример 1. Отступ от маркера до текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Расстояние в 20 пикселов между маркерами и текстом списка

Рис. 1. Расстояние в 20 пикселов между маркерами и текстом списка

Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно нулю. Но даже в этом случае небольшой исходный промежуток между маркером и текстом останется.

Указанное решение не работает, если для списка задано свойство list-style-position со значением inside .

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Как разместить элементы списка горизонтально?

Вывести маркированный список в одну строку и убрать отображение маркеров.

Решение

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).

Пример 1. Горизонтальный список

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Горизонтальный список

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Как сделать расстояние между элементами списка css

Здравствуйте, Аноним, Вы писали:

А>Как задать расстояние по вертикали между пунктами списка? (теги OL, UL, DL)

Re[2]: Расстояние между элементами списка

От: Аноним
Дата: 11.07.08 20:12
Оценка:

Здравствуйте, Панда, Вы писали:

П>Здравствуйте, Аноним, Вы писали:

А>>Как задать расстояние по вертикали между пунктами списка? (теги OL, UL, DL)

П>Например, так:

П>

Спасибо, получилось. А как уменьшить расстояние между меткой пункта списка и текстом?

* Пункт 1
* Пункт 2

*Пункт 1
*Пункт 2

Re[3]: Расстояние между элементами списка

От: Centaur
Дата: 12.07.08 06:00
Оценка:

Здравствуйте, Аноним, Вы писали:

А>А как уменьшить расстояние между меткой пункта списка и текстом?

Re[4]: Расстояние между элементами списка

От: Аноним
Дата: 12.07.08 20:20
Оценка:

Здравствуйте, Centaur, Вы писали:

C>Здравствуйте, Аноним, Вы писали:

А>>А как уменьшить расстояние между меткой пункта списка и текстом?

C>margin-left?

Не, не то. это отступ всего списка от левого края контейнера.

Re[5]: Расстояние между элементами списка

От: Mamut http://dmitriid.com
Дата: 14.07.08 10:21
Оценка:

А>>>А как уменьшить расстояние между меткой пункта списка и текстом?

C>>margin-left?

А>Не, не то. это отступ всего списка от левого края контейнера.

padding-left? причем не у списка, а у самого элемента списка

Re[6]: Расстояние между элементами списка

От: Centaur
Дата: 14.07.08 17:22
Оценка:

Здравствуйте, Mamut, Вы писали:

C>>>margin-left?

А>>Не, не то. это отступ всего списка от левого края контейнера.

M>padding-left? причем не у списка, а у самого элемента списка

Если мне не изменяет память, в разных браузерах отступ элемента списка делается по-разному, в одних margin’ом, в других padding’ом.

Re[7]: Расстояние между элементами списка

От: c-smile http://terrainformatica.com
Дата: 15.07.08 00:56
Оценка: +1

Здравствуйте, Centaur, Вы писали:

C>Здравствуйте, Mamut, Вы писали:

C>>>>margin-left?

А>>>Не, не то. это отступ всего списка от левого края контейнера.

M>>padding-left? причем не у списка, а у самого элемента списка

C>Если мне не изменяет память, в разных браузерах отступ элемента списка делается по-разному, в одних margin’ом, в других padding’ом.

В IE через UL < margin-left >у FF -> UL < padding-left >
Все зависит от того где авторы хотели видеть UL

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *