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

4 года назад

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

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

Похожие вопросы