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

Question

[Анна]

Добрый день! Искала решения везде, не нашла ничего полезного?

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

Answer 1

[Евгений Петров]

jsfiddle.net/petroveg/wt01x27x

Основа вертикального выравнивания без верхнего отступа — vertical-align:
1. Ячейка таблицы, но тогда ссылка будет строчной или строчно-блочной, а вам нужна ссылка на всю высоту.
2. Другой вариант — базовая линия в контейнере за счёт line-height по его же высоте, а внутри находится строчно-блочный элемент с vertical-align:middle.

Comments

[Артем Лисовский]

эм. а фиксированной ширины как добиться в таком случае?

[Евгений Петров]

@torrie table-layout:fixed

Answer 2

[Yuri Yakovlev]

Советую пройти вот этот урок - htmlacademy.ru/courses/50 , будете знать как вообще это надо делать правильно. Это лучше, чем дожидаться ответа :)

Comments

[Анна]

Пройдено еще год назад. Однако не отвечает на поставленный вопрос.

Answer 3

[Дима Паутов]

1) Ваш код не полный. Дайте полный код меню. К примеру списки даже не обнулены и когда я запускаю код, то у меня все меню кривое. Может еще что забыли вписать.
2) Насчет символов, я что то не обнаружил никаких символов у себя, когда запустил код! (Это по поводу hover'a)
3) У меня еще один вопрос, а пунктов сколько должно быть в меню? Просто бесконечно число пунктов туда не поместятся, если только сделать все таблицей =))

Comments

[Анна]

Сделала полный и работающий. Символы я не знаю как нормально добавить. Я могу это сделать через li:before, однако это тоже не решает проблему( Как в макете, 7 пунктов

Answer 4

[Артем Лисовский]

jsfiddle.net/55raekpo/1 как-то так если быстро накидать

Comments

[Анна]

При масштабировании последний пункт как слетал, так и слетает. Ничего не изменилось по сравнению с моим кодом.