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

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

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

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

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

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

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

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

См. также

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

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

Чтобы разместить элементы списка в несколько колонок, надо использовать свойство тега , которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.

Расположение ссылок в 4 колонки
Расположение ссылок в колонки автоматически
Расположение текста в 2 колонки

Результат Примера 2

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript.

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Как добавить к номеру списка круглую скобку

Для добавления скобки используем конструкцию li:before, которая добавляет перед каждым элементом списка некое содержание. В нашем случае — скобка » ) «.
Свойство counter-increment необходимо для увеличения номера списка на единицу.
Значение idnum — это уникальный идентификатор счетчика, имя его задаем сами.

Результат Примера 3

Первый
Второй
Третий
Четвертый

Приведённым способом можно делать любой вид нумерованного списка,
например, заключить число в квадратные скобки, в стилях при этом изменится только одна строка:

content: '[' counter(idnum) '] ';

Как расположить список горизонтально css

  123 456 789 1011 1213

ul li  display: inline; >

ul  display: flex; >

Как из вертикального списка — сделать горизонтальный

Как из вертикального списка: Вертикальный список Сделать, чтобы он был горизонтальный? Вот кусочек кода:

Отслеживать
задан 22 дек 2017 в 9:50
95 1 1 серебряный знак 7 7 бронзовых знаков
Александр, не много не понял о чем вы? 🙂
22 дек 2017 в 9:55

текстовую информацию лучше прилагать в виде текста: а) читать легче; б) можно копировать; в) поиск работает. исправить текст вопроса можно, нажав править ниже текста вопроса

22 дек 2017 в 9:57

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

1 Варинат. C помощью flex :

ul < list-style-type: none; margin: 0; padding: 0; >/* 1. Flex */ nav ul < display: flex; align-items: center; justify-content: center; >nav ul li

2 Вариант. inline-block :

ul < list-style-type: none; margin: 0; padding: 0; >/* 2. inline-block */ nav ul < text-align: center; >nav ul li

3 Вариант. float: left :

* < box-sizing: border-box; >ul < list-style-type: none; margin: 0; padding: 0; >/* 3. float */ nav ul < text-align: center; overflow: hidden; >nav ul li

4 Вариант. table :

* < box-sizing: border-box; >ul < list-style-type: none; margin: 0; padding: 0; >/* 4. table */ nav ul < text-align: center; display: table; width: 100%; >nav ul li

Отслеживать
ответ дан 22 дек 2017 в 10:17
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков

Через display: inline-block для li

.horisontal-ul li

Отслеживать
ответ дан 22 дек 2017 в 9:57
Дмитрий Полянин Дмитрий Полянин
13.6k 1 1 золотой знак 20 20 серебряных знаков 51 51 бронзовый знак

ul < display: flex; >li < margin-left: 20px; >li:nth-child(1)

Отслеживать
ответ дан 22 дек 2017 в 9:57
331 3 3 серебряных знака 12 12 бронзовых знаков

css3
html5
списки

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Читать:

Как привязать аккаунт геншин к хоелаб