Как растянуть меню на всю ширину css

Question

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

Для того чтобы пункты меню заняли равномерное пространство во всю ширину блока, проще всего воспользоваться flexbox, и его свойством justify-content которое равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце.

Рассмотрим пример:

<ul>
  <li>Пункт меню 1</li>![![enter image description here](https://i.ibb.co/cbDkyKt/menu.png "enter image title here")](https://i.ibb.co/cbDkyKt/menu.png "enter image title here")
  <li>Пункт меню 2</li>
  <li>Пункт меню 3</li>
  <li>Пункт меню 4</li>
</ul>

Результат

Пункт меню 1
Пункт меню 2
Пункт меню 3
Пункт меню 4

``` ```css ul { /* Добавим фоновый цвет для нашего меню */ background: #33CCFF; /* Выставим высоту */ height: 100px; /* Уберем точки у li элементов */ list-style-type: none; /* добавим отступ, чтобы крайние значения меню не были прижаты в плотную к границам меню */ padding: 10px; /* Используем flexbox */ display: flex; justify-content: space-between; /* Дополнительно сделаем вертикальное выравнивание */ align-items: center; } ``` Результат ![Меню с выравниванием](https://i.ibb.co/cbDkyKt/menu.png "Меню с выравниванием")

Как растянуть меню на всю ширину css

Ответы

Каталог