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

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

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

Решение

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

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

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

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

Решение

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

HTML по теме

CSS по теме

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

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

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

Как увеличить расстояние между li списком расположенном горизонтально?

У меня есть контейнер, допустим header-nav, который сам находится в header вместе с header-logotype. В нём находится 6 li элементов, которые находятся в горизонтальном положении, так как у header стоит правило display:flex . Как увеличить расстояние между словами в списке? padding и margin не помогает.

• Вопрос задан более трёх лет назад
• 2184 просмотра

2 комментария

Простой 2 комментария

Отступы между элементами списка?

Почему появляются отступы между inline -элементами? Как их убрать?

margin: 0, display:inline-block не помогают никак.

Использовать float нежелательно…

• Вопрос задан более трёх лет назад
• 14641 просмотр

Комментировать
Решения вопроса 1

B@rmaley.e> Если нужно сохранить читабельность кода, можно задать ul’у font-size:0 (и, может быть, что-нибудь еще из той же категории) и восстановить его для li.

Ответ написан более трёх лет назад
Нравится 5 1 комментарий
Kir Shatrov @RazoR_Empire Автор вопроса
Спасибо, помогло =)
Ответы на вопрос 3
Не ставте пробелы между [/li][li]
Ответ написан более трёх лет назад
Нравится 3 4 комментария
Kir Shatrov @RazoR_Empire Автор вопроса
Блин, никогда бы не думал что пробелы могут на это повлиять!

B@rmaley.e> Поведение вполне логично. Вы же ожидаете при написании Hello world пробела между словами? Вот и тут так же.

B@rmaley.e> Ну и стоит отметить, что такое поведение специфично для инлайновых (вне зависимости от того, являются они таковыми по своей природе (span, b, i, em, strong, etc) или из-за стилей (display:inline)) элементов.