title: HTML/CSS: Navigation bar stretches to fit, accommodates variable html
body: <p>I'm trying to get <code>li</code> elements in a <code>ul</code> to have equal width, and fit on one line, with CSS, without knowing how many <code>li</code>s there are when the CSSis made (i.e. dynamically generated HTML).</p>
  
  <p>W3Schools has a navigation bar <a href="http://www.w3schools.com/css/css_navbar.asp" rel="nofollow">example</a>, but it's fixed-width, and if you add another <code>li</code> rather scaling to fit, the whole layout gets thrown off.</p>
  
  <p>This is their example:</p>
  
  <p>CSS:</p>
  
  <pre><code>ul
  {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
  }
  li
  {
    float:left;
  }
  a:link,a:visited
  {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
  }
  a:hover,a:active
  {
    background-color:#7A991A;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Ideally, I would be able to add another <code>li</code> and the menu would still display great.</p>