CSS align a and text in an li tag

Here's what I am looking to create. The dollar amounts are linked to a form submit by jQuery.

Here's what I've got so far:

<div class="donate_left_column">
    <p>You can be the autemped lorem ipsum quisciis alic to dolupidebis consed deo vellor 开发者_C百科quam quam re:</p>
    <div class="donate_amounttable">
        <ul>
            <li><a class="donate_click" id="100" href="#">$100</a>provides 20 new novels for a college prep language arts class.</li>
            <li><a class="donate_click" id="200" href="#">$200</a>provides 1 week of childcare for a parent starting a new job.</li>
        </ul>
    </div>
</div>

Styles:

.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;
}

The problem is that it ends up looking like this:

Here's a fiddle to play with: http://jsfiddle.net/rboarman/6G8wr/

Thanks for the help!

This is best what I found for now: http://jsfiddle.net/6G8wr/6/

I used <sup> tag which is used for superscript text and a little styling.

Try something like this:

    div.donate_amounttable li
    {
        width:275px;
        display:block;
        font-size: 14px;
        color: #000;
        clear:both;
        padding:5px 0;
    }

    div.donate_amounttable a
    {
        display: block; 
        font-family: din-condensed-web,sans-serif;
        background-color: #bfd475;
        padding:5px 5px 5px 15px;
        width: 50px;
        font-size: 24px;
        color: #fff;
        text-align: right;
        float:left;
        margin-right:10px;
        text-decoration:none;
    }

You can view a working model here: http://ninja-code.net/extra/stackoverflow_test2.php

You can tweak it to add more spacing or make the li longer.

Your css is only having some little margin problems.
Try something like this: http://jsfiddle.net/6G8wr/2/

It looks like you main problem is floating the image and then not clearing. That makes your LI elements not wrap their children the way they normally would. This will take care of images and float them and it should also wrap nicely.

<style>
.donate_amounttable
{
}

.donate_amounttable ul
{    
 margin: 0px;
 padding: 0px;
}

.donate_amounttable ul li
{
    font-size: 14px;
    color: #000;
    margin-bottom: 6px;
    width: 450px;
}


.wordSpacing {
float: left;
margin-left: 12px;
width: 310px;
}
.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;
}
</style>

You'll have to add some tags here to get th word wrapping that you want and to make sure that the LI spans both child elements.

<div class="donate_amounttable">
 <ul>
  <li><a class="donate_click" id="100" href="#">$100</a><div class="wordSpacing">provides 20 new novels for a college prep language arts class.</div><div style="clear: left;"></div></li>
  <li><a class="donate_click" id="200" href="#">$200</a><div class="wordSpacing">provides 1 week of childcare for a parent starting a new job.</div><div style="clear: left;"></div></li>
 </ul>
</div>

http://jsfiddle.net/4GvQS/