Question

This is is my problem:
– I need to make a horizontal menu
– It needs to be flexible so no set width
– The frist and the last element have to be align to the very beginning and end of the nav
– The nav element can be different width
– The gap between the elements have to be equal (except no gap before the first element and no gap after the last )

My current solution is like this (see it in action here http://jsfiddle.net/wKjVq/):

ul{
    -webkit-box-orient: horizontal;
    display: -webkit-box;
    width: 100%;
}

.empty {
    -webkit-box-flex: 1;
}
<ul>
    <li>Element 1</li>
    <li class="empty"></li>
    <li>El 2</li>
    <li class="empty"></li>
    <li>Element three</li>
    <li class="empty"></li>
    <li>Element 4</li>
</ul>

By using box flex the empty list elements makes even gaps between the “real” nav elements.
I’m happy with the outcome of this solution but not really happy with using empty divs.

So my first questions is: Am I missing something totally obvious?
My 2nd question is: Do anyone else have any other solution (preferably in css 2 but css3 is fine as long as there is a nice fallback)?

Answer 1

You can remove the empty divs if you add box-pack: justify:

ul {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
}

See: http://jsfiddle.net/thirtydot/wKjVq/3/