Как сделать ul в строчку css

Для того, чтобы выровнять элементы списка 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 стилизуется с использованием свойств displayjustify-contentlist-stylepadding и margin для управления выравниванием и внешним видом элементов списка. Свойство justify-content: space-between выравнивает элементы списка в одну строку с равным пространством между ними. Свойства margin-right и margin-right: 0 управляют расстоянием между элементами. Таким образом, каждый элемент списка будет выровнен в одну строку, и между ними будет равный интервал.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать ul в строчку css

Наш специалист свяжется с вами в ближайшее время и уточнит детали