title: How to align the ul list in my case?
body: <p>I am trying to build an unordered list for my app.</p>
  
  <p>i have something like </p>
  
  <p>html</p>
  
  <pre><code>&lt;div id='wrapper' class='container'&gt;
        &lt;ul&gt;
            &lt;li id='first-btn'&gt;&lt;/li&gt;
            &lt;li id='second-btn'&gt;&lt;a href='#'&gt;test&lt;/a&gt;&lt;/li&gt;
            &lt;li id='third-btn'&gt;&lt;a href='#'&gt;test 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;        
    &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#wrapper li{
      display: inline-block;
      width: 50px;
      height: 70px;
      padding: 0;
  }
  
  #first-btn{
      background-color: #5A8D17;
  }
  
  #second-btn{
      background-color: #80CD1D;
  }
  
  #third-btn{
      background-color: #FFEE00;
  }
  </code></pre>
  
  <p>However, my end result is so weird. </p>
  
  <ol>
  <li>My second and third button are shifted down. </li>
  <li>I also don't want any gap between li so every button should be close next to each other<br>
  instead of seeing 2px of margin.</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/Mcq6u/" rel="nofollow">http://jsfiddle.net/Mcq6u/</a></p>
  
  <p>Can anyone help me about this? Thanks a lot</p>