title: CSS & HTML Button Under each other instead of Side By Side
body: <p>Basically the issue I am having today is the buttons I'm making are appearing under each other rather than side by side.</p>
  
  <p>This is my code CSS:</p>
  
  <p>(Buttons are 140 x 32)</p>
  
  <pre><code>/* BUTTON */
  
  a {
      text-decoration: none;
  }
  
  ul#redbutton li.newbutton {
      background: url("../images/blank_button.png") no-repeat;
      width: 140px;
  
  
      color: #FFFFFF;
      font-weight:bold; 
      text-decoration: none;   
      text-transform:uppercase; 
      text-align:center;
      font-size:12px;   
      line-height:30px;   
  }
  ul#redbutton li.newbutton:hover {
      background: url("../images/blank_button_hover.png") no-repeat;
      width: 140px;
  
      color: #FFFFFF;
      font-weight:bold; 
      text-decoration: none;   
      text-transform:uppercase; 
      text-align:center;
      font-size:12px;   
      line-height:30px;   
  }
  /* BUTTON END*/
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="redbutton"&gt;
  &lt;a href="link.php"&gt;&lt;li class="newbutton"&gt;TEXT&lt;/li&gt;&lt;/a&gt;
  &lt;a href="link.php"&gt;&lt;li class="newbutton"&gt;TEXT&lt;/li&gt;&lt;/a&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Screenshot: <a href="http://i.imgur.com/PcEzSyP.png" rel="nofollow">http://i.imgur.com/PcEzSyP.png</a></p>