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

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

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

Вариант №1

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

ul li {
  display: inline;
}

Вариант №2

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

ul {
  display: flex;
}

Чтобы пункты списка встали в строку, сделайте <ul> флекс-контейнером:

.menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

gap задаёт расстояние между пунктами. list-style: none убирает маркеры, padding: 0 — отступ слева, который браузер добавляет спискам по умолчанию.

Выравнивание пунктов

.menu {
  display: flex;
  justify-content: space-between;   /* разнести по всей ширине */
  align-items: center;              /* выровнять по вертикали */
}

Перенос на новую строку

Если пунктов много и они не помещаются:

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;   /* между строками и между пунктами */
}

Через inline-block

Старый способ без флексбокса:

.menu li {
  display: inline-block;
  margin-right: 24px;
}

Между элементами inline-block появляется лишний пробел из-за переносов строк в HTML. Флексбокс такой проблемы не имеет.

Ссылки в ряд без списка

Ссылки без списка оберните в <nav> и сделайте его флексом:

<nav class="links">
  <a href="/">Главная</a>
  <a href="/courses">Курсы</a>
</nav>

Для меню сайта чаще используют список <ul> внутри <nav>: программы экранного доступа объявляют число пунктов.

Флексбокс и навигацию разбирают на курсе «Профессиональная верстка».