Урок 17 · CSS

Горизонтальная навигация, которая переносится

Меню из списка ссылок можно поставить в ряд, не потеряв список в разметке.

Почему это следующий шаг

Карточки стоят в сетке. Шапка просит тот же приём для короткого меню.

Как сделать

У ul убери маркеры и внешний отступ, поставь display: flex и gap. Ссылкам дай padding, чтобы в них было легко попасть. flex-wrap: wrap разрешает перенос, если пунктов стало больше ширины. Не фиксируй меню в одну строку ценой того, что пункты вылезут за экран. Текущий пункт можно подсветить классом, а не только цветом.

.menu { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; padding: 0; margin: 0; }
.menu a { text-decoration: none; }

Что проверить

• Маркеры списка не торчат между пунктами.
• Пункты переносятся, а не сжимаются в кашу.
• По меню можно пройтись Tab.