HTML/CSS 中的单选/复选框对齐答案

【问题标题】：Radio/checkbox alignment in HTML/CSSHTML/CSS 中的单选/复选框对齐
【发布时间】：2010-09-28 15:04:07
【问题描述】：

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

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

这可能会被某些人所反对。我刚刚（再次）花了一些时间研究无表解决方案但失败了。我尝试过各种浮动组合、绝对/相对定位和类似方法。不仅它们主要依赖于单选按钮/复选框的估计高度，而且它们在不同浏览器中的行为也不同。理想情况下，我想找到一个不假设大小或特殊浏览器怪癖的解决方案。我可以使用表格，但我想知道还有其他解决方案。

【问题讨论】：

您应该编辑您的问题以明确您的意思是“在 HTML 中”。我打算回答你关于 Java 的问题...
我希望@Richard T 的意思是 JavaScript
我设置了一个 JSFIddle 来说明一些建议：jsfiddle.net/casebash/XNJxT/906
"正确对齐是什么意思？什么算正确对齐？
您可以按百分比对齐：我自己使用：vertical-align: -15%;在输入标签上

标签： html css checkbox radio-button

【解决方案1】：

我根本不会为此使用表格。 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.positioniseverything.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 */

【讨论】：

谢谢回复，但恐怕不能解决对齐问题。我应该更清楚。我的目标是将复选框/单选按钮与其标签垂直对齐。
你可以用我的代码做到这一点。玩弄标签上的边距，如果需要，您也可以将其添加到输入元素中。所以标签 { 边距：10px 0px 0px 10px;向左飘浮; } 会将标签向下推 10 个像素。
您可以这样做，但原始问题中的要点之一是不要假设单选按钮/复选框的大小。很可能我的问题太乐观了。

【解决方案2】：

以下适用于 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;
}

【讨论】：

我不明白您的回答为什么不被接受，它是所有主流浏览器中最简单的工作方式（截至 2010 年 4 月 18 日）
请注意，您的文档的 DOCTYPE 应该是 STRICT 才能看到 VERTICAL-ALIGN 的效果。
我认为这未被接受为答案的原因是，正如所选答案所说，一些浏览器添加了不对称的边距值，这使这种方法无法工作。

【解决方案3】：

我想我终于解决了这个问题。一种通常推荐的解决方案是使用 vertical-align: middle:

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

然而，问题在于，即使理论上它应该有效，它仍然会产生明显的错位。 CSS2 规范说：

vertical-align: middle: 将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

所以它应该在完美的中心（x 高度是字符 x 的高度）。但是，问题似乎是由于浏览器通常会为单选按钮和复选框添加一些随机不均匀的边距。可以检查，例如在 Firefox 中使用 Firebug，Firefox 中的默认复选框边距是 3px 3px 0px 5px。我不确定它来自哪里，但其他浏览器似乎也有类似的边距。所以要获得完美的对齐，需要去掉这些边距：

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

值得注意的是，在基于表格的解决方案中，边距以某种方式被吃掉并且一切都很好地对齐。

【讨论】：

非常好的答案 - 经过充分研究，并且有效。我看 CSS 越多，本地化的边距和填充设置似乎是关键。谢谢！
截至 2010 年 4 月 18 日，此解决方案在 Firefox 3.6.3 for win 中不起作用
一些不错的CSS，所以你不必为每个按钮和框设置样式 - input[type="radio"], input[type="checkbox"] {vertical-align: middle ;边距：0px； }
仅供参考，0 之后的 px 是多余的。当 CSS 值为 0 时，单位无关紧要，所以margin:0 就足够了。
在使用此方案时，记得检查同一行中其他元素的vertical-align（例如：<label>）。

【解决方案4】：

这有点小技巧，但这个 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; }
}

确保您在收音机上使用标签以使其正常工作。即

<option> <label>My Radio</label>

【讨论】：

媒体对我的移动设备帮助很大。谢谢！

【解决方案5】：

我发现最好的解决方法是为输入提供与标签匹配的高度。至少这解决了我在 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>

【讨论】：

匹配高度修复了我的收音机。不是复选框，但不用担心，因为我们的 site.css 相当复杂。

【解决方案6】：

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

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

【讨论】：

这是 margin-top:-1px; 这是我投票的额外调味料。我在用作按钮的跨度内有一个收音机。仅放置收音机样式的垂直对齐使收音机刚好穿过跨度的底部。将 vertical-align 放在 span 样式中会使按钮位于顶部。只有 margin-top 似乎没有效果。但是把它们放在一起，瞧
-1。这是一个坏主意，您正在导致无线电元素向上移动，导致它与其他周围元素不对齐。用几个无线电输入一个接一个地尝试它，侧面有其他元素。

【解决方案7】：

如果您的标签很长并且在多行中设置宽度和 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>

【讨论】：

【解决方案8】：

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

问候，

显示资产
显示检测器

【讨论】：

【解决方案9】：

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

label 
{

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

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

padding-bottom:7px; 

}

【讨论】：

【解决方案10】：

有几种实现方式：

对于 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"/>

对于 RadioButtonList：

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

【讨论】：

【解决方案11】：

下面我将动态插入一个复选框。包含样式以对齐复选框，最重要的是确保自动换行。这里最重要的是 display: table-cell;用于对齐

Visual Basic 代码。

'动态插入复选框的代码

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>

【讨论】：

【解决方案12】：

@sfjedi

我创建了一个类并为其分配了 css 值。

.radioA{
   vertical-align: middle;
}

它正在工作，您可以在下面的链接中查看它。 http://jsfiddle.net/gNVsC/ 希望有用。

【讨论】：

【解决方案13】：

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

【讨论】：

这在 Firefox 58 上对我不起作用，是不是某种非标准 CSS？