title: Center list items on one line
body: <p>I can't work out how to get my list items on one line:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;ul&gt;
          &lt;li class="navbutton"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navbutton"&gt;&lt;a href="#"&gt;Galleries&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navbutton"&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;li class="navbutton"&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#navbar{width:960px; height:46px; list-style-type: none; margin:0 auto; margin-top:1px; text-align:center;}
  #navbar li{list-style:none; text-align:center; margin:0 auto; background-position:center; background-repeat:no-repeat; padding-left:50px; padding-right:50px;}
  .navbutton{background:url(images/nav/lights_lit.jpg); width:138px; height:45px; display:block; background-position:center; background-repeat:no-repeat;}
  .navbutton a{background-image:url(images/nav/lights.jpg); width:138px; height:30px; display:block; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; color:#FFF; text-shadow:#000 0px 1px 4px; font-size:16px; padding-top:15px; text-decoration:none; cursor:pointer;  background-position:center; background-repeat:no-repeat;}
  #navbar a:hover {background-image: url(images/nav/lights.jpg);background-position:center; background-repeat:no-repeat;}
  </code></pre>
  
  <p>Live Link:
  <a href="http://brownbox.net.au/clients/matchlessphotography/" rel="nofollow">http://brownbox.net.au/clients/matchlessphotography/</a></p>