Как сверстать меню по типу flex-box (justify-content: space-between)?

Question

[Денис Букреев]

Такие дела. Привык уже к флексам, а тут вдруг понадобилась поддержка старых браузеров.
Но я даже не припомню, чтобы верстал такие менюшки без flex:


Соль в том, что пусто расстояние должно равномерно сосредотачиваться между пунктам меню, а первый и последний пункты должны примыкать к краям.

Ну и пунктов меню может быть 3 или 4. Это добавляет проблем, т.к. под постоянное количество пунктов можно еще заверстать.

Comments

[yogurt1]

Попробуй полифилл Flexibility, также нужно обработать CSS, что бы было еще и display: -js-flex и т.д.

Answer 1

[Андрей Верх]

Делаете Inlinde-block с text-align:justify

Вот тут описание

Answer 2

[KlassT]

Можно с помощью js решить. Напишу код на jquery:

var mainWidth = $('.container').width();
var menuWidth = 0;
var countItems = 0;
$('nav li').each(function() {
    menuWidth += $(this).width();
    countItems++;
});
countItems--;
var marginItems = (mainWidth-menuWidth)/countItems;
$('nav li').css('margin-right', marginItems);
$('nav li:last-child').css('margin-right', 0);

Comments

[Денис Букреев]

Скрипты в таком деле конечно не очень. Ловить ресайз и каждый раз выполнять скрипт - не производительно)
Конечно не думаю, что есть можно CSS обойтись, но хотелось бы.

Answer 3

[Ankhena]

codepen.io/anon/pen/kXzroX

Comments

[Денис Букреев]

И?
Блоки распределятся равномерно, а сам текст не будет выравниваться как надо

[Ankhena]

Денис Букреев:
На Вашем скрине все 4 кнопки по разному центрированы (ну или по другому, расстояние между текстами ссылок всюду разное).

В ответе ссылка, чтобы расстояние было одинаковое

[Ankhena]

Денис Букреев: цвет у спана уберете, естественно, оставила для наглядности