title: How can I get a <ul> to be evenly spaced across the content area it exists in?
body: <p>I have a List that I'm using as a list of tabs:</p>
  
  <pre><code>&lt;div id="SearchForm"&gt;
      &lt;ul class="TabControl"&gt;
          &lt;li&gt;
              &lt;a href="/search/Funds"&gt;Funds (60)&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/search/Companies"&gt;Companies (4)&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/search/Groups"&gt;Groups (1)&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/search/Categories"&gt;Categories (0)&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/search/Categories"&gt;Identifiers (60)&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where the CSS is defined as follows:</p>
  
  <pre><code>#SearchForm ul {
      list-style: none;
      padding:0;
      margin: 15px 0 5px 0;
  }
  
  #SearchForm li {
      display: inline;
      background-color: #F6E9D8;
      margin: 12px 6px 0 0;
      padding: 6px 0 6px 0;   
  }
  
  #SearchForm li a {
      padding: 0 20px;
  }
  </code></pre>
  
  <p>This list only takes up about 90% of the width available to it on the page, where everything else in the page takes up 100% of the width because they're laid out in divs. The space avaiable to them is defined in an element supplied by the client at </p>
  
  <pre><code> width: 62.1em
  </code></pre>
  
  <p>Basically what I need is to get the tabs to be distributed evenly so they fill the entire width available to them, with the text/link aligned in the middle of each tab? Is there a way for me to do this?</p>