Как выстроить элементы в линию CSS

Для выстраивания элементов в линию в CSS можно использовать свойство display с значением inline-block, которое превращает блочные элементы в строчные блоки, которые можно выстраивать в линию друг за другом.

Пример:

.item {
  display: inline-block; /* устанавливаем элемент в виде строчного блока */
  margin-right: 10px; /* задаем отступ справа между элементами */
}

В этом примере элементы с классом item выстроены в линию друг за другом с помощью свойства display: inline-block. Также задан отступ справа между элементами с помощью свойства margin-right, чтобы увеличить промежуток между элементами.

Если элементы должны выстраиваться в линию внутри контейнера, то на этот контейнер можно также применить свойство display: flex и задать нужные правила выравнивания элементов внутри этого контейнера.

Пример:

.container {
  display: flex; /* выстраиваем элементы в линию */
  justify-content: space-between; /* равномерно распределяем пространство между элементами */
}

В этом примере элементы внутри контейнера с классом container выстроены в линию с помощью свойства display: flex. Также задано правило равномерного распределения пространства между элементами с помощью свойства justify-content: space-between.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как выстроить элементы в линию CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали