-10%
-40%
Профессии со скидками и подарки от Хекслета
Покупайте себе, дарите друзьям!

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

Ответы
Аватар пользователя Вячеслав Межуревский
Вячеслав Межуревский
29 сентября 2022

Для того что бы расположить список (<ul>/<ol>) элементов в линию можно применить один из ниже приведенных способов.

<ul>
  <li>123</li>
  <li>456</li>
  <li>789</li>
  <li>1011</li>
  <li>1213</li>
</ul>

Вариант №1

Изменить свойство display у тега <li> на inline. Тем самым изменить способ показа элемента в документе с блочного на строчный, после этого <li>-теги станут в ряд, и контент внутри них будет занимать столько места, сколько требуется для отображения

ul li {
  display: inline;
}

Вариант №2

Использовать flexbox. Аналогично предыдущему примеру изменить свойство display на flex, в родительском контейнере тегов li - в данном случае в <ul>, после чего они встанут в ряд.

ul {
  display: flex;
}
Добавьте ваш ответ

Рекомендуемые курсы

HTML
Pug
Миксины
Шаблонизатор
9 часов
Посмотреть
CSS3
HTML5
селекторы
Доступность
18 часов
Посмотреть
CSS3
CSS Flex
CSS адаптивность
Верстка
10 часов
Посмотреть