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

Для расположения элементов горизонтально на CSS можно использовать несколько свойств.

Flexbox С помощью свойств flexbox можно легко расположить элементы в одной строке. Для родительского элемента (контейнера) нужно задать свойство display со значением flex, а для дочерних элементов (элементов, которые нужно разместить в строке) — свойство flex-grow со значением 1 или более. Например:

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

Inline-block Еще один способ расположения элементов в строке — использование свойства display со значением inline-block для дочерних элементов. Например:

.item {
  display: inline-block;
}

Float С помощью свойства float можно расположить элементы в строку, однако для использования этого свойства вам придется играть со значениями свойств margin и width, чтобы элементы занимали нужное количество места в строке.

.item {
  float: left;
  width: 50px;
  margin-right: 10px;
}

Это проиллюстрирует, как расположить элементы горизонтально на CSS.

Поделиться в: