title: Horizontal Lists without floating the LI
body: <p>Okay, so I'm writing CSS for a navigation bar that uses an un-ordered list to organize the menu. The menu is centered not pushed to any side, and the width of any given li element cannot be pre-determined (it varies with how much text is in the menu item), so I can't hardcode widths.</p>
  
  <p>I have the following CSS code: </p>
  
  <pre><code>#nav ul {
      list-style: none;
      padding-bottom: 10px;
      height:16px;
  }
  #nav ul li {
      position: relative;
      display: inline-block;
  }
  #nav {
      position: relative;
      margin-top: -30px;
      text-align: center;
      font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
      font-size: 14px;
  }
  </code></pre>
  
  <p>for the nav element, and this works perfectly to produce the centered nav-menu in Chrome 13. But when I view the page in IE8, the UL turns vertical and I can't get it to become horizontal.</p>
  
  <p>So far, search results indicate that I need to <code>float:left;</code> or <code>float:right;</code> the &lt;LI&gt;s to make the menu horizontal. I've tried this and it does make the menu horizontal in IE8 but it will float to left or right. I need to center the menus, and apparently there is no <code>float:center;</code>. </p>
  
  <p>The HTML corresponding to the menu is</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li class="current_page_item"&gt;[LINK]&lt;/li&gt;
          &lt;li class="page_item"&gt;[LINK]&lt;/li&gt;
          &lt;li class="page_item"&gt;[LINK]&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any way without needing to know the width of the LIs or having to resort to JS to get the menu centered AND horizontal? </p>