Why are my switches lining up?

Question

I tried everything I could 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 to configure, I absolutely cannot connect the latest radio book to others! The only way I can do this is to add

margin: -2px;

for input fields in css file and obviously this is not what i want to do.

Can anyone solve the problem?

Heres 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 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 won't the last radio button be lined up?

JSFIDDLE

Answer 1

You need to start the layout ul, standing away from the floatting element (here is your one <p>before it):

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

Demo

, floatting : http://css-tricks.com/all-about-floats/

Answer 2

: UL :

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

- http://jsfiddle.net/m7ds2/