Как сверстать такое меню?

Несколько раз уже встречал в макете подобного вида меню take.ms/kPxzf , тут оно должно занимать всю область wrapper по ширине. Допустим 950 пикселей. Как такое сверстать, чтобы последний элемент был именно в конце контейнера, первый в начале, а отступы между ними были одинаковыми. Другими словами, чтобы ul li занимал всю ширину контейнера полностью без пустых мест. Если делать inline-block, то надо вычислять margin-right, а при ресайзе размер сойдет и последний элемент выйдет за предел. Также появятся проблемы, если изменить текст. Если делать table и td text-align: left, то у последней ячейки справа будет ненужный отступ. Если делать text-align:right, то слева у первой.
Как это делается правильно?
  • Вопрос задан
  • 2457 просмотров
Пригласить эксперта
Ответы на вопрос 3
@bogomazov_vadim
Насколько я понял нужно прочесть это и это
Ответ написан
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Почти идеальное решение: cssdeck.com/labs/8qsqyyqr

А «почти» потому, что когда меню переносится на две и более строки, у последнего пункта предпоследней строки есть отступ от правого края.
Ответ написан
SKolt
@SKolt
https://www.instagram.com/seregamih/
Так отмените этот самый последний отступ, есть специальные псевдоклассы:
selector:first-child{стили} /*Первый элемент родителся*/
selector:last-child{стили} /*Первый элемент родителся*/

А есть еще nth-child - там вообще можно на каждый элемент свой стиль поставить. Но это если вы будете использовать табличку, как сами предложили.

Если использовать CSS3 FlexBox, такая задача решается элементарно. Просто к блоку, в котором содержатся пункты меню, добавьте вот такой код.
div.menu{display:flex;  justify-content:space-between;}

Простенький пример: codepen.io/anon/pen/emzJja
ЗЫ: ну и про префиксы не забывайте. Flex - штука новая, некоторые браузеры его не понимают ;-)
Ответ написан
Ваш ответ на вопрос

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

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