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

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

Например, чтобы расположить три элемента div в одной строке, можно создать контейнер-родитель и применить к его потомкам свойство display: inline-block.

HTML:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

CSS:

.container {
  text-align: center; /* Для центрирования элементов в строке */
}

.element {
  display: inline-block; /* Расположить элементы в строку*/
}

В данном примере мы создали контейнер-родитель с классом «container» и три вложеных div-элемента с классом «element». Свойство text-align: center центрирует элементы по горизонтали, а свойство display: inline-block располагает их в одной строке.

Если нужно расположить элементы в строку на всю ширину экрана, можно использовать свойство flexbox:

HTML:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}

.element {
  flex: 1; /* Пространство между элементами делится равномерно */
}

В этом примере мы также создали контейнер-родитель с классом «container» и три вложеных div-элемента с классом «element». Свойство display: flex устанавливает контейнер-родитель в режим гибкого контейнера, а свойство justify-content: space-between располагает элементы в строке и занимает всю доступную ширину. Свойство flex: 1 устанавливает равное расстояние между элементами.