How to prevent in-line list from wrapping

Question

I'm attempting to have a navigation menu that stretches 100% across the page wrapper. In my testing with 5 list items, I have the following problems

• With 5 items I was trying to set the width of the items to 20% but that always wraps (see http://jsfiddle.net/L7JGg/6/)
• Setting width to 19.8%, I can get the items to to not wrap, but only at full screen. If I resize, it starts to wrap once I resize the screen (see http://jsfiddle.net/smBvM/1/)

Here is an example with it not wrapping at fullscreen.

Once you resize the browser, it wraps

Can someone explain WHY this happens and how to properly fix it?

The jsFiddle links above have code demonstrating the issue live and here is the code.

CSS

ul.nice-menu, ul.nice-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

#zone-menu ul > li {
    width: 19.8%;
    padding: 0;
    margin: 0;
}

ul.nice-menu li {
    margin: 0;
    padding: 0;
}

ul.nice-menu-down li {

}

ul.nice-menu li {
    display: inline-block;
    background-color: #eee;
    position: relative;
}

HTML

<div id="zone-menu">
    <ul class="nice-menu nice-menu-down">
        <li><a href="/">Another Test</a></li>
        <li><a href="/">Test</a></li>
        <li><a href="/">Another Test2</a></li>
        <li><a href="/">Menu Item 2</a></li>
        <li><a href="/">Test3</a></li>
    </ul>
</div>

Answer 1

Lame solution

Use display: inline-block instead of float: left for the <li>. This will allow them to respect white-space: nowrap from the parent and keep them in line regardless of width. This also requires that you deal with the whitespace between the <li> elements or else it will add space between them.

http://jsfiddle.net/L7JGg/3/

Cool solution

Use box-sizing: border-box on the <li>s. The 20% width does not include the border with the default box-sizing: content-box. Or I guess you could just remove the border...

http://jsfiddle.net/L7JGg/4/

Answer 2

Flexbox solution

Thanks to CSS flex this sort of problem has become rather trivial. One nice thing about this is that the a-tag elements remain equal heights even if one has wrapping content.

Add vendor prefixes as required.

ul {
  display: flex;
}

li {
  display: flex;
  width: 20%;
  border: 1px solid black;
}

li:not(:first-child) {
  border-left-width: 0;
}

a {
  flex-grow: 1;
  color: white;
  text-align: center;
  font-family: sans-serif;
  text-decoration: none;
  padding: 10px 15px;
  background-color: #72c2cc;
}

a:hover {
  color: #000;
}

<ul style="list-style: none; margin: 0; padding-left: 0;">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3 wraps first</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>