html - HTML/CSS 中的单选/复选框对齐

Question

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

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

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

score 122 · Accepted Answer

我想我终于解决了这个问题。一种通常推荐的解决方案是使用垂直对齐：中间：

<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

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

score 31 · Accepted Answer

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

score 14 · Accepted Answer

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

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

score 7 · Accepted Answer

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

score 4 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

问候，

<style type="text/css">
输入[类型=复选框] {
    边距底部：4px；
    垂直对齐：中间；
}

标签 {
    垂直对齐：中间；
}
</style>


<input id="checkBox1" type="checkbox" /><label for="checkBox1">显示资产</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">显示检测器</label><br />

score 1 · Accepted Answer

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

label 
{

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

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

padding-bottom:7px; 

}

score 1 · Accepted Answer

有几种实现方式：

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

score 1 · Accepted Answer

下面我将动态插入一个复选框。包含样式以对齐复选框，最重要的是确保自动换行。这里最重要的是 display: 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>

score 1 · Accepted Answer

@sfjedi

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

.radioA{
   vertical-align: middle;
}

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

score -1 · Accepted Answer

-1

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

于 2017-06-22T10:31:43.013 回答

html - HTML/CSS 中的单选/复选框对齐

13 回答 13

Related

Reference