How to layout a menu like flex-box (justify-content: space-between)?

Question

css

So it goes. I'm already used to flex, and then suddenly I needed support for old browsers.
But I don't even remember laying out such menus without flex: The point

is that the empty space should be evenly centered between menu items, and the first and last items should be adjacent to the edges.
Well, there can be 3 or 4 menu items. This adds problems, because. under a constant number of points, you can still make up.

Answer 1

Do an inlinde-block with text-align:justify
Here is the description

Answer 2

You can solve it with js. I will write code in 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);

Answer 3

codepen.io/anon/pen/kXzroX