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

概述我已经尝试了所有我能想到的东西……我有一个带有一堆文本字段,一个选择框和一组单选按钮的表单.无论css属性的组合我尝试调整我绝对不能让最后一个单选按钮与其他按钮对齐！我可以排队的唯一方法是添加 margin: -2px; 到css文件中的输入字段,显然这不是我想做的事情. 是否有人能够解决这个问题？ 继承人的HTML <form action="this" method="POST"> < 我已经尝试了所有我能想到的东西……我有一个带有一堆文本字段,一个选择框和一组单选按钮的表单.无论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 :             </li>            <li>            <input type="radio" name="type" value="indivIDual">            IndivIDual :             </li>            <li>            <input type="radio" name="type" value="patron">            Patron : 0            </li>            <li>            <input type="radio" name="type" value="benefactor">            Benefactor : 0            </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

解决方法 你需要触发ul上的布局,将浮动元素放在一边(这是你之前的< p>)：

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

DEMO

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

总结

以上是内存溢出为你收集整理的HTML – 为什么我的收音机按钮排队？全部内容，希望文章能够帮你解决HTML – 为什么我的收音机按钮排队？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。