title: How to prevent in-line list from wrapping
body: <p>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</p>
  
  <ul>
  <li>With 5 items I was trying to set the width of the items to 20% but that always wraps (see <a href="http://jsfiddle.net/L7JGg/6/" rel="nofollow noreferrer">http://jsfiddle.net/L7JGg/6/</a>)</li>
  <li>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 <a href="http://jsfiddle.net/smBvM/1/" rel="nofollow noreferrer">http://jsfiddle.net/smBvM/1/</a>)</li>
  </ul>
  
  <p>Here is an example with it not wrapping at fullscreen.</p>
  
  <p><img src="https://i.stack.imgur.com/U8BQG.jpg" alt="enter image description here"></p>
  
  <p>Once you resize the browser, it wraps</p>
  
  <p><img src="https://i.stack.imgur.com/H54En.jpg" alt="enter image description here"></p>
  
  <p>Can someone explain WHY this happens and how to properly fix it?</p>
  
  <p>The jsFiddle links above have code demonstrating the issue live and here is the code.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul.nice-menu, ul.nice-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
  }
  
  #zone-menu ul &gt; 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;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="zone-menu"&gt;
      &lt;ul class="nice-menu nice-menu-down"&gt;
          &lt;li&gt;&lt;a href="/"&gt;Another Test&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Another Test2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Test3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>