title: CSS align a and text in an li tag
body: <p>Here's what I am looking to create. The dollar amounts are linked to a form submit by jQuery.</p>
  
  <p><img src="https://i.stack.imgur.com/NFdiY.png" alt="enter image description here"></p>
  
  <p>Here's what I've got so far:</p>
  
  <pre><code>&lt;div class="donate_left_column"&gt;
      &lt;p&gt;You can be the autemped lorem ipsum quisciis alic to dolupidebis consed deo vellor quam quam re:&lt;/p&gt;
      &lt;div class="donate_amounttable"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="donate_click" id="100" href="#"&gt;$100&lt;/a&gt;provides 20 new novels for a college prep language arts class.&lt;/li&gt;
              &lt;li&gt;&lt;a class="donate_click" id="200" href="#"&gt;$200&lt;/a&gt;provides 1 week of childcare for a parent starting a new job.&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styles:</p>
  
  <pre><code>.donate_amounttable 
  {
  }
  
  .donate_amounttable ul
  {
      display: inline;
  
  }
  
  .donate_amounttable li
  {
      display: inline;
      font-size: 14px;
      color: #000;
      padding-bottom: 6px;
  }
  
  .donate_amounttable a
  {
      display: block; 
      font-family: din-condensed-web,sans-serif;
      background-color: #bfd475;
      padding: 6px;
      width: 50px;
      font-size: 24px;
      color: #fff;
      text-align: right;
      float: left;
      clear: left;
  }
  </code></pre>
  
  <p>The problem is that it ends up looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/FG4ha.png" alt="enter image description here"></p>
  
  <p>Here's a fiddle to play with: <a href="http://jsfiddle.net/rboarman/6G8wr/" rel="nofollow noreferrer">http://jsfiddle.net/rboarman/6G8wr/</a></p>
  
  <p>Thanks for the help!</p>