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

В общем случае, для того чтобы элементы встали в ряд, необходимо применить flexbox - модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. Рассмотрим пример. В примере ниже, применим вышеописанный способ к двум разным группам элементов. Двум и списку - элементов.

<body>
  <div class="wrapper">
    <div class="block">1</div>
    <div class="block">2</div>
  </div>

  <ul class="wrapper">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>

Стили:

.wrapper {
  /* Применяем flex к контейнеру-обертке */
  display: flex;
}

/* убираем маркеры у списка*/
li {
  list-style-type: none;
}

.block {
  border: 1px solid blue;
  margin: 2px;
}

Поставить элементы в строку проще всего через flexbox. Родителю задают display: flex:

<nav class="menu">
  <a href="/">Главная</a>
  <a href="/courses">Курсы</a>
  <a href="/blog">Блог</a>
</nav>

Дочерние элементы встанут в ряд, gap задаёт расстояние между ними.

Выравнивание

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

Значения justify-content:

Один элемент вправо, остальные влево: margin-left: auto у этого элемента.

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

По умолчанию flex сжимает элементы, чтобы все поместились. Разрешить перенос:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 250px; /* не уже 250px, растягиваться на свободное место */
}

Через Grid

Если нужны колонки одинаковой ширины:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

inline-block

.item {
  display: inline-block;
}

Старый способ. Между элементами появляются промежутки от пробелов в HTML, и выравнивать их по высоте сложнее. Сейчас используют flex.

Элементы не встают в ряд

• display: flex задан самим элементам, а нужен родителю;
• у элементов задана ширина 100%;
• внутри стоит <br> или блок с width: 100%.

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