Верстка горизонтального меню на CSS flex
Делаю горизонтальное меню на css. Нужно добиться эффекта, чтобы пункты меню (элементы li в которых a-ссылки) занимали всё место в блоке меню по горизонтали. Иными словами чтоб когда наводишь мышкой, ховер загорался от края до края, а не только на ширину слова в пункте меню. Для наглядности прикладываю 2 скрина. Первый как надо сделать, второй — как получается сейчас 
ul < list-style: none; >nav ul < display: flex; flex-direction: row; justify-content: space-around; height: 50px; background-color: black; >nav li < display: flex; margin-right: 10px; >a < text-decoration: none; >nav a < display: flex; justify-content: center; align-items: center; text-transform: uppercase; color: white; font-size: 14px; padding: 0 10px; >nav a:hover
Буду очень благодарен за помощь.
Отслеживать
задан 17 апр 2020 в 21:49
Ivan Zhukov Ivan Zhukov
13 1 1 серебряный знак 4 4 бронзовых знака
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Для тега li добавил flex: 1; , для a — width: 100% .
ul < list-style: none; margin: 0; padding: 0; >nav ul < display: flex; flex-direction: row; justify-content: space-around; height: 50px; background-color: black; >nav li < flex: 1; display: flex; >a < text-decoration: none; >nav a < display: flex; justify-content: center; align-items: center; width: 100%; text-transform: uppercase; color: white; font-size: 14px; padding: 0 10px; >nav a:hover
Отслеживать
ответ дан 17 апр 2020 в 22:26
4,916 3 3 золотых знака 17 17 серебряных знаков 37 37 бронзовых знаков
При наведении на первый и последний пункт меню остается черная полоса
17 апр 2020 в 22:29
@Leks, черная полоса из-за того, что автор не обнулил стили у ul , li . Поправил пример.
17 апр 2020 в 22:31
Указал на недочет т.к. у Вас получалось немного не то что хотел автор вопроса (без обид)
17 апр 2020 в 22:33
Спасибо большое за ответ. оказалось не хватало немногого) я еще пока до свойства flex: 1 не добрался. А стили у меня просто вначале для всего обнулены.
Горизонтальное меню без float
Иногда требуется сделать такое меню, которое и горизонтальное, но при этом находится по центру странички. Как обычно делается горизонтальное меню? А очень просто — при помощи float:left; Но вот отцентрировать такое меню у вас вряд ли получится. (ну ладно, получится; но какой ценой? upd: habrahabr.ru/blogs/css/49756/#comment_1306559)
Многие начнут думать над проблемой и придут к выводу, что нам поможет такое замечательное CSS свойство как display:inline-block! И ведь правда — везде работает! В FF3, Opera 8-9, Safari 3 и даже в IE (если специально для него написать display:inline;)!
Кажется, что проблема решена! Просто и достаточно элегантно! Но… но тут мы посмотрели в FF2 и… всё. Приплыли. Не работает 🙁
Лезем на mozilla.org и ищем что-нибудь такое эдакое, чтобы разделить стили для FF2 и FF3. И ведь находим! Наш помошник — свойство display:-moz-inline-grid;
И работает. Вроде бы. Кстати, способ можно пользовать и для картинок: gruzzilkin.110mb.com/nofloat
И еще. Валидацию такой документ не пройдет из-за @-moz-document url-prefix.
- www.mauzon.com/?p=87 — горизонтальное выравнивание меню, основанного на плавающих блоках. Способ всем хорош, только используется лишний оберточный DIV
- Как всегда, я навалил кучу лишнего кода. минимизируем
- Несколько вариантов, так или иначе использующих display:inline-block:
www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css,
foohack.com/2007/11/cross-browser-support-for-inline-block-styling,
www.brunildo.org/test/ImgThumbIB.html.