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

79

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

<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  css  checkbox  radio-button 
— 扬·齐奇
source
您应该编辑问题，以明确表示“用HTML表示”。我正要回答您的Java问题...
— 理查德T
3
我希望@Richard T的意思是JavaScript
— QueueHammer
1
我设置了一个JSFIddle来说明一些建议：jsfiddle.net/casebash/XNJxT/906
— Casebash 2013年
“正确对齐是什么意思？什么
— 才算
您可以按百分比对齐：我自己使用：垂直对齐：-15％；在输入标签上
— PhilMaGeo

Answers:

121

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

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

然而，问题在于，即使从理论上讲它仍然会产生可见的未对准。CSS2规范指出：

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

因此，它应该位于完美的中心（x高度是字符x的高度）。但是，此问题似乎是由于浏览器通常在单选按钮和复选框中添加了一些随机的不均匀边距而引起的。例如，您可以使用Firefox在Firefox中检查Firefox中默认的复选框边距为3px 3px 0px 5px。我不确定它来自哪里，但其他浏览器的利润似乎也差不多。因此，要获得完美的一致性，就需要摆脱这些空白：

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

仍然有趣的是，在基于表的解决方案中，边距被不知怎么吃了，并且所有内容都很好地对齐了。

— 扬·齐奇
source
4
答案非常好-经过深入研究，它确实有效。我对CSS的了解越多，本地化的边距和填充设置似乎就越关键。谢谢！
— penderi
截至2010
— Chris 2010年
5
一些不错的CSS，因此您不必设置每个按钮和框的样式-input [type =“ radio”]，input [type =“ checkbox”] {vertical-align：middle; 边距：0px; }
— perilandmishap 2011年
4
仅供参考，0之后的px是多余的。当CSS值为0时，单位无关紧要，因此margin:0就足够了。
— jedmao 2012年
2
使用此解决方案时，请记住检查vertical-align同一行中的其他元素（例如<label>：）。
— Diogo Kollross
31

以下在Fi​​refox和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;
}
— sids
source
我不明白为什么您的答案没有被接受，这是所有主要浏览器上最简单的方法（截至2010
— Chris 2010年
7
请注意，您的文档的DOCTYPE应该为STRICT才能查看VERTICAL-ALIGN的效果。
4
我认为未接受此答案的原因是，正如所选择的答案所述，某些浏览器添加了不对称的边距值，这阻止了这种方法的工作。
— DaveyDaveDave 2011年
13

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

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

— 达里奥
source
这是margin-top：-1px; 那是让我投票的额外调味料。我在用作按钮的跨度内有一个收音机。仅使收音机样式垂直对齐，使收音机仅越过跨度的底部。将spans样式设置为vertical-align会使按钮位于顶部。只有页边空白似乎没有作用。但是放在一起吧，瞧
— 戈登
-1。这是一个坏主意，您正在使无线电元素向上移动，从而使其与其他周围的元素不对齐。用几个无线电输入一个接一个地使用侧面的其他元件来进行尝试。
— codenamezero
6

我根本不会使用表格。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类：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 */
— 基思·多根（Keith Donegan）
source
感谢您的答复，但恐怕它不能解决对齐问题。我应该更清楚一些。我的目标是使复选框/单选按钮与其标签垂直对齐。
— Jan Zich
您可以使用我的代码执行此操作。使用标签上的边距进行操作，如果需要，也可以将其添加到输入元素中。因此标签{margin：10px 0px 0px 10px; 向左飘浮; }会将标签下推10个像素。
— Keith Donegan
3
您可以这样做，但是原始问题的要点之一是不假设有关单选按钮/复选框的大小。我的问题很可能过于乐观了。
— Jan Zich
4

这有点hack，但是此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>
— 贾斯汀·文森特
source
媒体对移动设备的帮助很大。谢谢！
— 斯文·范·佐伊伦
3

如果标签很长并且在多行上设置宽度和显示：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>
— 美佳
source
2

我发现最好的解决方法是为输入提供与标签匹配的高度。至少这解决了我与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>
— 安格斯
source
匹配的高度固定了我的收音机。不是复选框，但不要担心，因为我们的site.css非常复杂。
— SushiGuy 2013年
2

下面的代码应该工作:)

问候，

<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 />
— 亲属
source
1

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

label 
{

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

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

padding-bottom:7px; 

}
— 邓克斯
source
1

有几种方法可以实现它：

  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. 对于DevExpress CheckBox：

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

  3. 对于RadioButtonList：

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

  4. 对于必填字段验证器： 

    <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>`
— 阿杰·香卡（Ajay Shankar）
source
1

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

— eil
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.