HTML / CSS中的收音机/checkboxalignment方式
什么是最简洁的方式来正确alignment单选button/checkbox与文本？ 我迄今为止唯一可靠的解决scheme是基于表格的：
<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> 这可能会被某些人所憎恶。 我刚刚花了一些时间（再次）调查一个无表的解决scheme，但失败了。 我尝试过各种组合的浮动，绝对/相对定位和类似的方法。 不仅他们主要依靠单选button/checkbox的估计高度，而且在不同的浏览器中performance也不同。 理想情况下，我想find一个解决scheme，不承担任何关于尺寸或特殊的浏览器怪癖。 我用桌子很好，但我想知道哪里有另一个解决scheme。
我想我终于解决了这个问题。 一个通常推荐的解决scheme是使用vertical-align：middle：
<input type="radio" style="vertical-align: middle"> Label
然而，问题在于，即使它在理论上工作，仍然会产生明显的错位。 CSS2规范说：
vertical-align：middle：将盒子的垂直中点与父盒子的基线加上父盒子的x高度的一半alignment。
所以它应该在完美的中心（x高度是字符x的高度）。 但是，这个问题似乎是由于浏览器通常给单选button和checkbox添加了一些随机的不均匀的边缘。 例如，可以在使用Firebug的Firefox中检查Firefox的默认checkbox边距是3px 3px 0px 5px 。 我不确定它来自哪里，但其他浏览器似乎也有类似的利润率。 所以为了获得完美的配合，需要摆脱这些边缘：
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
值得注意的是，在基于表格的解决scheme中，边距以某种方式被吃掉，所有的东西都很好地alignment。
以下作品在Firefox和Opera（对不起，我目前无法访问其他浏览器）：
<div class="form-field"> <input id="option1" type="radio" name="opt"/> <label for="option1">Option 1</label> </div>
CSS：
.form-field * { vertical-align: middle; }
我发现最好的和最简单的方法是这样，因为你不需要添加标签，div或任何东西。
input { vertical-align: middle; margin-top: -1px;}
我根本不会使用表格。 CSS可以轻松地做到这一点。
我会做这样的事情：
<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; }
注意：我使用了http://www.fixiseverything.net/easyclearing.html中的clearfix类;
.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 */
这是一个黑客的一点，但这个CSS似乎得到它在所有的浏览器工作非常好，就像使用表（除了铬）
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; } }
确保你使用无线电标签来使其工作。 即
<option> <label>My Radio</label>
如果你的标签很长，并在多行设置宽度和显示：内联块将有所帮助。
.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>
我发现最好的解决方法是给input一个与标签匹配的高度。 至less这个固定的问题与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>
下面的代码应该工作:)
问候，
<style type =“text / css”>
input[type = checkbox] {
margin-bottom：4px;
vertical-align：middle;
}
标签 {
vertical-align：middle;
}
</样式>
<input id =“checkBox1”type =“checkbox”/> <label for =“checkBox1”>显示资产</ label> <br />
<input id =“checkBox2”type =“checkbox”/> <label for =“checkBox2”>显示检测器</ label> <br />
这是一个简单的解决scheme，为我解决了这个问题：
label { /* for firefox */ vertical-align:middle; /*for internet explorer */ *bottom:3px; *position:relative; padding-bottom:7px; }
有几种方法来实现它：
-
对于ASP.NET标准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> -
对于DevExpress CheckBox：
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/> <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/> -
对于RadioButtonList：
<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>Yes</asp:ListItem> <asp:ListItem>No</asp:ListItem> </asp:RadioButtonList> -
对于必需的字段validation程序：
<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>`
下面我会dynamic地插入一个checkbox。 包括样式是为了alignmentcheckbox，最重要的是要确保自动换行是笔直的。 这里最重要的是display：table-cell; 为了alignment
可视化的基本代码。
'代码来dynamic插入checkbox
Dim tbl As Table = New Table() Dim tc1 As TableCell = New TableCell() tc1.CssClass = "tdCheckTablecell" 'get the data for this checkbox Dim ds As DataSet Dim Company As ina.VullenCheckbox Company = New ina.VullenCheckbox Company.IDVeldenperScherm = HETid Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf") ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6
'创buildcheckbox
Dim radio As CheckBoxList = New CheckBoxList radio.DataSource = ds radio.ID = HETid radio.CssClass = "tdCheck" radio.DataTextField = "OmschrijvingVC" radio.DataValueField = "IDVullenCheckbox" radio.Attributes.Add("onclick", "documentChanged();") radio.DataBind()
'连接checkbox
tc1.Controls.Add(radio) tr.Cells.Add(tc1) tbl.Rows.Add(tr)
'checkbox的样式
input[type="checkbox"] {float: left; width: 5%; height:20px; border: 1px solid black; } .tdCheck label { width: 90%;display: table-cell; align:right;} .tdCheck {width:100%;}
和HTML输出
<head id="HEAD1"> <title> name </title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" /> </head> <style type='text/css'> input[type="checkbox"] {float: left; width: 20px; height:20px; } .tdCheck label { width: 90%;display: table-cell; align:right;} .tdCheck {width:100%;} .tdLabel {width:100px;} .tdCheckTableCell {width:400px;} TABLE { vertical-align:top; border:1;border-style:solid;margin:0;padding:0;border-spacing:0; border-color:red; } TD { vertical-align:top; /*labels ed en de items in het datagrid*/ border: 1; border-style:solid; border-color:green; font-size:30px } </style> <body id="bodyInternet" > <form name="Form2" method="post" action="main.aspx?B" id="Form2"> <table border="0"> <tr> <td class="tdLabel"> <span id="ctl16_ID{A}" class="DynamicLabel"> TITLE </span> </td> <td class="tdCheckTablecell"> <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0"> <tr> <td> <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" /> <label for="ctl16_{A}_0"> this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp </label> </td> </tr> <tr> <td> <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" /> <label for="ctl16_{A}_1"> ITEM2 </label> </td> </tr> <tr> <td> <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" /> <label for="ctl16_{A}_2"> ITEM3 </label> </td> </tr> </table> </td> </tr> </table> </form> </body>
@sfjedi
我创build了一个类，并为其分配了css值。
.radioA{ vertical-align: middle; }
它正在工作，你可以在下面的链接检查它。 http://jsfiddle.net/gNVsC/希望它是有用的。;
input[type="radio"], input[type="checkbox"] { vertical-align: middle; margin-top: -1; }
