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

4 года назад

Человек-Молекула

Ответы

В общем случае, для того чтобы элементы встали в ряд, необходимо применить 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;
}

3 года назад

Вячеслав Межуревский

1 месяц·Для продвинутых

Позиционирование в CSS

Получите навык работы с CSS и адаптивными интерфейсами