3

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)?

Erik Portin
  • 48
  • 1
  • 4

1 Answers1

3

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/

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • For a solution more widely supported than Flexbox, start from this: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/6880421#6880421 – thirtydot Jan 04 '12 at 09:46
  • Thank you, works great. Exactly what I needed Goodbye empty elements! – Erik Portin Jan 04 '12 at 12:01