Why wont my radio buttons line up?

Question

I have tried everything I can think of...I have a form with a bunch of text fields, a select box, and a group of radio buttons. No matter what combination of css attributes I try tweaking I absolutely cannot get the last radio button to align with the other ones! The only way I can make it line up is to add

margin: -2px;

to the input fields in the css file, and obviously thats not what I want to be doing.

Is anyone up to the challenge of figuring this out?

Heres the html

<form action="this" method="POST">
    <ul>

        <li>
        <label for="name">Name</label>
        <input name="name" id="name" type="text">
        </li>

        <li>
        <label for="address">Street Address</label>
        <input name="address" id="address" type="text">
        </li>

        <li>
        <label for="address2">Address Line 2</label>
        <input name="address2" id="address2" type="text">
        </li>

        <li>
        <label for="city">City</label>
        <input name="city" id="city" type="text">
        </li>

        <li>
        <label for="state">State</label>
        <select name="state" id="state">
            <option value="" selected="selected">Select a State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select> 
        </li>

        <li>
        <label for="zip">Postal / Zip Code</label>
        <input name="zip" id="zip" type="text">
        </li>

        <li>
        <label for="phone">Phone Number</label>
        <input name="phone" id="phone" type="text">
        </li>

        <li>
        <label for="email">Email</label>
        <input name="email" id="email" type="text">
        </li>

        <li>
        <p>I am pledging support for this campaign as a/an:</p>
        <ul id="types">
            <li>
            <input type="radio" name="type" value="student" checked>
            Student : $20
            </li>

            <li>
            <input type="radio" name="type" value="individual">
            Individual : $45
            </li>

            <li>
            <input type="radio" name="type" value="patron">
            Patron : $250
            </li>

            <li>
            <input type="radio" name="type" value="benefactor">
            Benefactor : $750
            </li>

        </ul>
        </li>


        <li>
        <label for="memoryOf">In Memory Of</label>
        <input name="memoryOf" id="memoryOf" type="text">
        </li>


        <li>
        <label for="honorOf">In Honor Of</label>
        <input name="honorOf" id="honorOf" type="text">
        </li>

    </ul>

    <input type="submit">
    <input type="reset">

</form>

heres the css

li {
list-style-type: none;
}

ul {
padding: 0;
}

input {
height: 2em;
margin: 2px;
padding: 2px;
}

select {
height: 20px;
margin: 5px;
}

label {
float: left;
width: 10em;
margin-right: 1em; text-align : right;
padding: 2px;
text-align: right;
}

p {
float: left;
width: 10em;
margin-right: 1em;
text-align: right;
}

Why wont the last radio button line up?

JSFIDDLE

Answer 1

You need to trigger layout on ul standing aside a floatting element (here is your <p> just before it):

ul {
padding: 0;
  overflow:hidden;/* now it minds floatting element in and aside it */
}

DEMO

Some info on how to deal with floatting elements here: http://css-tricks.com/all-about-floats/

Answer 2

You need to add display: inline-block to the UL listing radio button like this:

ul {
    padding: 0;
    display: inline-block; /* will LINE UP your radios */ 
}

Here is the demo - http://jsfiddle.net/m7ds2/