Как расположить элементы в строку css
Ответы
Вячеслав Межуревский
05 октября 2022
В общем случае, для того чтобы элементы встали в ряд, необходимо применить flexbox - модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. Рассмотрим пример. В примере ниже, применим вышеописанный способ к двум разным группам элементов. Двум <div> и списку <li> - элементов.
<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;
}
0
0
