HTML/CSS 中的单选/复选框对齐方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/396439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio/checkbox alignment in HTML/CSS
提问by Jan Zich
What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:
将单选按钮/复选框与文本正确对齐的最简洁方法是什么？到目前为止，我一直在使用的唯一可靠的解决方案是基于表格的：
<table>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 1</td>
</tr>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 2</td>
</tr>
</table>
This may be frown upon by some. I've just spent some time (again) investigating a tableless solution but failed. I've tried various combinations of floats, absolute/relative positioning and similar approaches. Not only that they mostly relied silently on an estimated height of the radio buttons / checkboxes, but they also behaved differently in different browsers. Ideally, I would like to find a solution which does not assume anything about sizes or special browser quirks. I'm fine with using tables, but I wonder where there is another solution.
这可能会被一些人反对。我刚刚花了一些时间（再次）调查无表解决方案，但失败了。我尝试了各种浮动、绝对/相对定位和类似方法的组合。不仅它们主要依赖单选按钮/复选框的估计高度，而且它们在不同浏览器中的行为也不同。理想情况下，我想找到一个解决方案，它不假设任何关于大小或特殊浏览器的怪癖。我可以使用表格，但我想知道哪里有另一种解决方案。
回答by Jan Zich
I think I have finally solved the problem. One commonly recommended solution is to use vertical-align: middle:
我想我终于解决了这个问题。一种普遍推荐的解决方案是使用 vertical-align: middle：
<input type="radio" style="vertical-align: middle"> Label
The problem, however, is that this still produces visible misalignments even though it should theoretically work. The CSS2 specification says that:
然而，问题是这仍然会产生可见的错位，即使它理论上应该可行。CSS2 规范说：
vertical-align: middle:Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
垂直对齐：中间：将框的垂直中点与父框的基线加上父框x高度的一半对齐。
So it should be in the perfect centre (the x-height is the height of the character x). However, the problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes. One can check, for instance in Firefox using Firebug, that the default checkbox margin in Firefox is 3px 3px 0px 5px. I'm not sure where it comes from, but the other browsers seem to have similar margins as well. So to get a perfect alignment, one needs to get rid of these margins:
所以它应该在完美的中心（x 高度是字符 x 的高度）。然而，这个问题似乎是由浏览器通常为单选按钮和复选框添加一些随机不均匀边距造成的。例如，可以使用 Firebug 在 Firefox 中检查 Firefox 中的默认复选框边距是否为3px 3px 0px 5px。我不确定它来自哪里，但其他浏览器似乎也有类似的利润率。因此，要获得完美的对齐方式，需要去掉这些边距：
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely.
有趣的是，在基于表格的解决方案中，边距以某种方式被吃掉了，而且一切都很好地对齐。
回答by Jan Zich
The following works in Firefox and Opera (sorry, I do not have access to other browsers at the moment):
以下适用于 Firefox 和 Opera（抱歉，我目前无法访问其他浏览器）：
<div class="form-field">
<input id="option1" type="radio" name="opt"/>
<label for="option1">Option 1</label>
</div>
The CSS:
CSS：
.form-field * {
vertical-align: middle;
}
回答by Dario
I found the best and easiest way to do it is this one because you don't need to add labels, divs or whatsoever.
我发现最好和最简单的方法就是这个，因为你不需要添加标签、div 或任何东西。
input { vertical-align: middle; margin-top: -1px;}
input { vertical-align: middle; margin-top: -1px;}
回答by Keith Donegan
I wouldn't use tables for this at all. CSS can easily do this.
我根本不会为此使用表格。CSS 可以轻松做到这一点。
I would do something like this:
我会做这样的事情：
<p class="clearfix">
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</p>
p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }
Note: I have used the clearfix class from : http://www.positioniseverything.net/easyclearing.html
注意：我使用了来自以下位置的 clearfix 类：http: //www.positioniseeverything.net/easyclearing.html
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
回答by Justin Vincent
This is a bit of a hack but this CSS seems to get it working very nicely in all browsers the same as using tables (apart from chrome)
这是一个小技巧，但这个 CSS 似乎让它在所有浏览器中都能很好地工作，就像使用表格一样（除了 chrome）
input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=radio] { margin-top: -2px; }
}
Make sure you use labels with your radios for it to work. i.e.
确保对收音机使用标签以使其正常工作。IE
<option> <label>My Radio</label>
回答by Mika
If your label is long and goes on multiple rows setting the width and display:inline-block will help.
如果您的标签很长并且在多行上设置宽度和 display:inline-block 会有所帮助。
.form-field * {
vertical-align: middle;
}
.form-field input {
clear:left;
}
.form-field label {
width:200px;
display:inline-block;
}
<div class="form-field">
<input id="option1" type="radio" name="opt" value="1"/>
<label for="option1">Option 1 is very long and is likely to go on two lines.</label>
<input id="option2" type="radio" name="opt" value="2"/>
<label for="option2">Option 2 might fit into one line.</label>
</div>
回答by Kin
The following code should work :)
以下代码应该可以工作:)
Regards,
问候，
<style type="text/css">
input[type=checkbox] {
margin-bottom: 4px;
vertical-align: middle;
}
label {
vertical-align: middle;
}
</style>
<input id="checkBox1" type="checkbox" /><label for="checkBox1">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />
回答by Angus
I found the best fix for this was to give the input a height that matches the label. At least this fixed my problem with inconsistencies in Firefox and IE.
我发现最好的解决方法是给输入一个与标签匹配的高度。至少这解决了我在 Firefox 和 IE 中不一致的问题。
input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }
<li>
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</li>
回答by Dunx
This is a simple solution which solved the problem for me:
这是一个简单的解决方案，它为我解决了这个问题：
label
{
/* for firefox */
vertical-align:middle;
/*for internet explorer */
*bottom:3px;
*position:relative;
padding-bottom:7px;
}
回答by Ajay Shankar
There are several ways to implement it:
有几种实现方式：
For ASP.NET Standard CheckBox:
.tdInputCheckBox { position:relative; top:-2px; } <table> <tr> <td class="tdInputCheckBox"> <asp:CheckBox ID="chkMale" runat="server" Text="Male" /> <asp:CheckBox ID="chkFemale" runat="server" Text="Female" /> </td> </tr> </table>For DevExpress CheckBox:
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/> <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>For RadioButtonList:
<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>Yes</asp:ListItem> <asp:ListItem>No</asp:ListItem> </asp:RadioButtonList>For Required Field Validators:
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
对于 ASP.NET 标准复选框：
.tdInputCheckBox { position:relative; top:-2px; } <table> <tr> <td class="tdInputCheckBox"> <asp:CheckBox ID="chkMale" runat="server" Text="Male" /> <asp:CheckBox ID="chkFemale" runat="server" Text="Female" /> </td> </tr> </table>对于 DevExpress 复选框：
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/> <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>对于单选按钮列表：
<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>Yes</asp:ListItem> <asp:ListItem>No</asp:ListItem> </asp:RadioButtonList>对于必填字段验证器：
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
