title: how to make a ul li css menu with variable space between items
body: <p>The idea is to make a menu with a fixed amount of items. Each of the items must have a fixed padding on them to make them look decent when placing a border around them. (so far so good)
  But these items must be spread out in a div with a fixed size, spaced evenly - the items themselves won't be the same size as this is dependent on the text within these items.</p>
  
  <p>What I can't figure out is how to make sure that the items are on 1 line with a dynamic (more or less) evenly spacing between them within a fixed div (in my case 1000px). The first item should be lined out to the left edge of the div. The last item should be lined out to the right edge of the div.</p>
  
  <p>Below is what I have so far. This already puts the padding and border on it, but I can't set a margin: 0 auto on it, well I can, but it doesn't do anything. The main issue is that the spacing in between should be dynamic because the items tend to jump upon zooming the browser which in turn messes up the alignment of the outer items and even makes some items jump to the next line. That's why (zooming messes things up - especially with fixed widths) I'm reluctant to put an actual width on each of the items (I know I need a width to use margin: 0 auto properly, but even when I do use a width, it doesn't seem to do what I want it to do).</p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;ul&gt;
          &lt;li class="menu-1"&gt;&lt;a href="" &gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-2"&gt;&lt;a href="" class=""&gt;Nieuws&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-3"&gt;&lt;a href="" class=""&gt;Producten&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-4"&gt;&lt;a href="" class=""&gt;Algemene informatie&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-5"&gt;&lt;a href="" class=""&gt;Promoties&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-6"&gt;&lt;a href="" class=""&gt;Algemene voorwaarden&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-7"&gt;&lt;a href="" class=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  #navigation ul {
      margin:0px;
      padding:0px;
      list-style:none;
      width:1000px;   
      display:block;
  }
  
  #navigation li {
      float: left;
      display:inline;
  }
  
  #navigation li a {
      padding:10px 15px 10px 15px;
      float:right;
  
      display: block;
      border: 0.1em solid #dcdce9;
      color: #6d6f71;
      text-decoration: none;
      text-align: center; 
      font-size:18px;
      font-weight:bold;
  }
  
  #navigation{
      width:100%;
  }
  </code></pre>