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

Question

[desuvin]

Несколько раз уже встречал в макете подобного вида меню take.ms/kPxzf , тут оно должно занимать всю область wrapper по ширине. Допустим 950 пикселей. Как такое сверстать, чтобы последний элемент был именно в конце контейнера, первый в начале, а отступы между ними были одинаковыми. Другими словами, чтобы ul li занимал всю ширину контейнера полностью без пустых мест. Если делать inline-block, то надо вычислять margin-right, а при ресайзе размер сойдет и последний элемент выйдет за предел. Также появятся проблемы, если изменить текст. Если делать table и td text-align: left, то у последней ячейки справа будет ненужный отступ. Если делать text-align:right, то слева у первой.
Как это делается правильно?

Comments

[Lynn «Кофеман»]

Для современных браузеров это легко делается flexbox-ами.

Answer 1

[Vadim Bogomazov]

Насколько я понял нужно прочесть это и это

Comments

[desuvin]

Спасибо большое!

Answer 2

[Павел Радьков]

Почти идеальное решение: cssdeck.com/labs/8qsqyyqr

А «почти» потому, что когда меню переносится на две и более строки, у последнего пункта предпоследней строки есть отступ от правого края.

Comments

[desuvin]

Супер, именно это и искал. В данном случае спасением стал text-align: justify; Спасибо большое :)

[A K]

desuvin: Так пометьте ответ как решение

Answer 3

[Сергей]

Так отмените этот самый последний отступ, есть специальные псевдоклассы:

selector:first-child{стили} /*Первый элемент родителся*/
selector:last-child{стили} /*Первый элемент родителся*/

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

Если использовать CSS3 FlexBox, такая задача решается элементарно. Просто к блоку, в котором содержатся пункты меню, добавьте вот такой код.

div.menu{display:flex;  justify-content:space-between;}

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

Comments

[desuvin]

Отмены margin-ов и так делаю на последнем элементе, но это не помогает в данном случае.
Если делать таблицей (table-cell или td), то колонки будут занимать 100%/количество колонок. А у последнего справа будет пустота. Если последнему справа вставить text-align: right, то отступ перед предыдущим будет больше.