HTML/CSS 中的单选/复选框对齐方式

使单选按钮/复选框与文本正确对齐的最干净的方法是什么？到目前为止，我使用的唯一可靠的解决方案是基于表格的:

<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>

有些人可能会对此表示反对。我刚刚(又)花了一些时间研究了一个无表的解决方案，但是失败了。我尝试了浮点数、绝对/相对定位和类似方法的各种组合。不仅仅是因为它们主要依赖于单选按钮/复选框的估计高度，而且它们在不同的浏览器中的表现也不同。理想情况下，我想找到一个解决方案，不假设任何大小或特殊的浏览器怪癖。我可以使用表格，但是我想知道哪里有其他的解决方案。

259084 次浏览
小开

我根本不会使用表格。 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; }

注意: 我使用了 clearfix 类 from: http://www.positioniseverything.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 */
小开

下面是 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;
}
小开
最佳答案

我想我终于解决了这个问题。一个常见的解决方案是使用竖直对齐: 中间:

<input type="radio" style="vertical-align: middle"> Label

然而，问题在于，这仍然会产生明显的失调，尽管理论上应该是可行的。CSS2规范说:

竖直对齐: 中间: 将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

所以它应该在完美的中心(x 的高度是字符 x 的高度)。然而，这个问题似乎是由于浏览器通常会给单选按钮和复选框添加一些随机的不均匀边距。可以检查，例如在使用 Firebug 的 Firefox 中，Firefox 中的默认复选框边距是 3px 3px 0px 5px。我不知道它是从哪里来的，但其他浏览器似乎也有类似的利润率。因此，为了得到一个完美的对齐，我们需要去掉这些边距:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

值得注意的是，在基于表的解决方案中，边距会被吃掉，一切都很好地对齐。

小开

这是一个有点黑客，但这个 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>
小开

我发现最好的解决办法是给输入一个与标签匹配的高度。至少这解决了我在 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>
小开

我发现最好和最简单的方法是这一个，因为你不需要添加标签，div 或任何东西。

input { vertical-align: middle; margin-top: -1px;}

小开

如果您的标签很长，并且在多行上设置宽度和显示: 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>
小开

下面的代码应该可以工作:)

问候,



<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 />
小开

这是一个简单的解决方案，为我解决了这个问题:

label
{


/* for firefox */
vertical-align:middle;


/*for internet explorer */
*bottom:3px;
*position:relative;


padding-bottom:7px;


}
小开

有几种方法可以实现这一目标:

  1. 对于 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>

  2. For DevExpress CheckBox:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>

  3. For RadioButtonList:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

  4. 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>`
小开

下面我将动态地插入一个复选框。样式包括对齐复选框，最重要的是确保单词换行是直的。这里最重要的是显示: table-cell; 用于对齐

可视化基本代码。

动态插入复选框的代码

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

创建复选框

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()

连接复选框

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

复选框的样式

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

我已经创建了一个类，并为它分配了 css 值。

.radioA{
vertical-align: middle;
}

它的工作，你可以检查它在下面的链接。 Http://jsfiddle.net/gnvsc/ 希望有用。

小开 

input[type="radio"], input[type="checkbox"] {
vertical-align: middle;
margin-top: -1;
}


提交答案