Как сверстать меню во всю фиксированную ширину области контента?

Добрый день! Искала решения везде, не нашла ничего полезного?
86c4c8e5ca7240ce9fba98f578885307.jpg
Вот такое меню. Если делаю пункты меню через padding, то, естественно, при масштабировании последний пункт улетает на вторую строку. Использовать хак на ul: width 101% я не могу, заказчику очень важно, что ширина не менялась, даже на 1%. Задавать ширину и высоту каждому пункту меню я тоже не могу, ибо у меня текст занимает две строки, а значит ни line-height, ни text-align: center не могут мне помочь в решении этой проблемы.
Подскажите, пожалуйста, как решить эту проблему? Как сделать меню так, чтобы ничего не съезжало, ширина оставалась одинаковой при любом масштабе?
p.s. И еще по поводу символов между пунктами меню: при hover, они должны исчезать или сливаться с фоном. Как сверстать эти символы, чтобы они идеально сидели посередине и всегда исчезали, если навести на пункт меню курсор?
Добавила полный код меню:
jsfiddle.net/521sg9hs/1
  • Вопрос задан
  • 2684 просмотра
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
jsfiddle.net/petroveg/wt01x27x

Основа вертикального выравнивания без верхнего отступа — vertical-align:
1. Ячейка таблицы, но тогда ссылка будет строчной или строчно-блочной, а вам нужна ссылка на всю высоту.
2. Другой вариант — базовая линия в контейнере за счёт line-height по его же высоте, а внутри находится строчно-блочный элемент с vertical-align:middle.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
twentyfivesymbolsusername
@twentyfivesymbolsusername
Front-end developer
Советую пройти вот этот урок - htmlacademy.ru/courses/50 , будете знать как вообще это надо делать правильно. Это лучше, чем дожидаться ответа :)
Ответ написан
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
1) Ваш код не полный. Дайте полный код меню. К примеру списки даже не обнулены и когда я запускаю код, то у меня все меню кривое. Может еще что забыли вписать.
2) Насчет символов, я что то не обнаружил никаких символов у себя, когда запустил код! (Это по поводу hover'a)
3) У меня еще один вопрос, а пунктов сколько должно быть в меню? Просто бесконечно число пунктов туда не поместятся, если только сделать все таблицей =))
Ответ написан
torrie
@torrie
Всё знаю, всё умею
jsfiddle.net/55raekpo/1 как-то так если быстро накидать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы