Для того, чтобы выровнять элементы списка ul
в одну строку, необходимо использовать CSS свойство display
с значением flex
. Смотрите пример:
HTML:
<ul class="menu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>
CSS:
.menu {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
margin-right: 20px;
}
.menu li:last-child {
margin-right: 0;
}
Пояснение: список ul
стилизуется с использованием свойств display
, justify-content
, list-style
, padding
и margin
для управления выравниванием и внешним видом элементов списка. Свойство justify-content: space-between
выравнивает элементы списка в одну строку с равным пространством между ними. Свойства margin-right
и margin-right: 0
управляют расстоянием между элементами. Таким образом, каждый элемент списка будет выровнен в одну строку, и между ними будет равный интервал.