为什么最后一个单选按钮不会排队？

Question

我已经尝试了所有我能想到的...我有一个带有一堆文本字段，一个选择框和一组单选按钮的表单。无论css属性的组合我尝试调整我绝对不能让最后一个单选按钮与其他按钮对齐！我可以排队的唯一方法是添加

margin: -2px;

到css文件中的输入字段，显然这不是我想做的事情。

是否有人能够解决这个问题？

继承人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>

继承人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;
}

为什么最后一个单选按钮不会排队？

JSFIDDLE

Answer 1

您需要将display：inline-block添加到UL列表单选按钮，如下所示：

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

以下是演示 - http://jsfiddle.net/m7ds2/

Answer 2

您需要触发ul上的布局，将浮动元素放在一边（这是您之前的<p>）：

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

<强> DEMO

有关如何处理浮动元素的一些信息：http://css-tricks.com/all-about-floats/

为什么我的收音机按钮不排队？

为什么最后一个单选按钮不会排队？

2 个答案: