如何一致地跨浏览器对齐复选框及其标签-Java 学习之路

1563

这是一直困扰着我的CSS小问题之一 . Stack Overflow周围的人们如何垂直对齐 checkboxes 和他们的 labels 始终 cross-browser ？每当我在Safari中正确对齐它们时（通常在 input 上使用 vertical-align: baseline ），它们在Firefox和IE中完全关闭 . 修复它在Firefox中，Safari和IE不可避免地搞砸了 . 每次编写表单时，我都会浪费时间 .

这是我使用的标准代码：

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

我通常使用Eric Meyer的重置，因此表单元素相对干净的覆盖 . 期待您提供的任何提示或技巧！

30 回答

这样做我从来没有遇到过这样的问题：

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

回复于 2024-04-28T09:59:20+08:00

6
一个似乎运作良好的简单方法是应用垂直对齐调整复选框的垂直位置 . 它仍然会因浏览器而异，但解决方案并不复杂 .
```
input {
    vertical-align: -2px;
}
```
Reference
回复于 2024-04-28T09:59:20+08:00

谢谢！这也一直让我疯狂 .

在我的特殊情况下，这对我有用：

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

我正在使用reset.css，这可能解释了一些差异，但这似乎对我有用 .

回复于 2024-04-28T09:59:20+08:00

12
只是想在标签上添加关于'for'属性的讨论（稍微偏离主题）：

即使没有必要，请提供它，因为从javascript使用非常方便：
```
var label = ...
var input = document.getElementById(label.htmlFor);
```
这比试图弄清楚标签的输入是否嵌套，或者输入是在标签之前，还是之后......等等都要方便得多 . 所以它永远不会伤害它 . 所以 .

只需2美分 .
回复于 2024-04-28T09:59:20+08:00
6
选择400 400 upvotes的答案对我来说在Chrome 28 OSX中不起作用，可能是因为它没有在OSX中测试过，或者在2008年回答这个问题的时候确实有效 .

时代已经改变，现在新的CSS3解决方案是可行的 . 我的解决方案使用pseudoelements创建自定义复选框 . 所以规定（无论你看看它的优缺点）如下：
- 仅适用于现代浏览器（FF3.6，IE9，Chrome，Safari）
- 依赖于自定义设计的复选框，在每个浏览器/操作系统中都会呈现完全相同的复选框 . 在这里，我刚刚选择了一些简单的颜色，但你可以随时添加线性渐变等，以便让它更具爆炸性 .
- 适合某种字体/字体大小，如果更改，您只需更改复选框的位置和大小，使其显示为垂直对齐 . 如果调整正确，最终结果仍应接近所有浏览器/操作系统中的完全相同 .
- 没有垂直对齐属性，没有浮点数
- 必须在我的示例中使用提供的标记，如果像问题一样构造它将不起作用，但是，布局基本上看起来相同 . 如果你想移动东西，你还必须移动相关的CSS
你的HTML：
```
<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>
```
你的CSS：
```
div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}
```
此解决方案隐藏了复选框，并将伪元素添加并设置为标签以创建可见复选框 . 由于标签与隐藏的复选框相关联，因此输入字段仍将更新，并且值将与表单一起提交 .

jsFiddle：http://jsfiddle.net/SgXYY/6/

如果你按下单选按钮的话：http://jsfiddle.net/DtKrV/2/

希望有人觉得这很有用！
回复于 2024-04-28T09:59:20+08:00
10
我还没有完全测试我的解决方案，但似乎工作得很好 .

我的HTML很简单：
```
<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
```
然后我将所有复选框设置为 24px 的高度和宽度 . 为了使文本对齐，我使标签的 line-height 也 24px 并像这样分配 vertical-align: top; ：

EDIT: IE测试后，我将 vertical-align: bottom; 添加到输入并更改了标签的CSS . 您可能会发现需要一个条件IE css案例来整理填充 - 但文本和框是内联的 .
```
input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}
```
如果有人发现这不起作用，请告诉我 . 这是它的实际应用（在Chrome和IE中 - 道歉，因为截图是在视网膜上拍摄的，并且使用了IE的并行）：
回复于 2024-04-28T09:59:20+08:00
3
The following gives pixel-perfect consistency across browsers, even IE9:

这种方法非常明智，显而易见：
- 创建输入和标签 .
- 将它们显示为块，以便您可以根据需要浮动它们 .
- 将高度和线高设置为相同的值，以确保它们居中并垂直对齐 .
- 对于 em 测量，要计算元素的高度，浏览器必须知道这些元素的字体高度，并且它本身不能在em测量中设置 .
This results in a globally applicable general rule:
```
input, label {display:block;float:left;height:1em;line-height:1em;}
```
字体大小适用于每个表单，字段集或元素 .
```
#myform input, #myform label {font-size:20px;}
```
Tested in latest Chrome, Safari, and Firefox on Mac, Windows, Iphone, and Android. And IE9.

此方法可能适用于不高于一行文本的所有输入类型 . 应用类型规则以适应 .
回复于 2024-04-28T09:59:20+08:00

使用简单的 vertical-align: sub ，已建议使用pokrishka .

Fiddle

HTML代码：

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS代码：

.checkboxes input {
    vertical-align: sub;
}

回复于 2024-04-28T09:59:20+08:00

试试 vertical-align: middle

您的代码似乎应该是：

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

回复于 2024-04-28T09:59:20+08:00

8
如果你正在使用Twitter Bootstrap，你可以在 <label> 上使用 checkbox 类：
```
<label class="checkbox">
    <input type="checkbox"> Remember me
</label>
```
回复于 2024-04-28T09:59:20+08:00

121

现在那个flexbox在所有现代浏览器中都支持，这样的事情对我来说似乎更容易 .

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Here's the complete prefixed version demo:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

回复于 2024-04-28T09:59:20+08:00

24

我通常留下一个未标记的复选框，然后将其“标签”作为一个单独的元素 . 这是一个痛苦，但是复选框和它们的标签之间的显示方式有很多跨浏览器的区别（正如你所注意到的），这是我能够接近控制一切外观的唯一方式 .

出于同样的原因，我也最终在winforms开发中这样做了 . 我认为复选框控件的根本问题在于它实际上是两个不同的控件：盒子和标签 . 通过使用一个复选框，您可以将它留给控件的实现者来决定这两个元素是如何彼此相邻显示的（并且它们总是错误，错误=不是您想要的） .

我真的希望有人能更好地回答你的问题 .

回复于 2024-04-28T09:59:20+08:00

我通常使用行高来调整静态文本的垂直位置：

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

希望有所帮助 .

回复于 2024-04-28T09:59:20+08:00

2

硬编码复选框's height and width, remove its padding, and make its height plus vertical margins equal to the label' s line-height . 如果标签文本是内联的，请浮动复选框 . Firefox，Chrome和IE7都以相同的方式呈现以下示例：http://www.kornea.com/css-checkbox-align

回复于 2024-04-28T09:59:20+08:00

938

<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

无论如何，你应该将表单控件组合在一起放在他们自己的fieldsets中，在这里，它会播放wrappa . set input / label do display：block，input float left，label float right，设置宽度，用左/右边距控制间距，相应地对齐标签文本 .

所以

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

您可能需要在两者上设置边框，轮廓和线高，以及跨浏览器/媒体解决方案 .

回复于 2024-04-28T09:59:20+08:00

7
所以我知道这已经被多次回答了，但我觉得我有一种比已经提供的更优雅的解决方案 . 不仅有一个优雅的解决方案，还有两个独立的解决方案，可以让您感到满意 . 话虽如此，您需要知道和看到的所有内容都包含在2个JS Fiddle中，并带有注释 .

解决方案＃1依赖于给定浏览器的原生“Checkbox”，但有一个扭曲...它包含在div中，更容易定位跨浏览器，带溢出：隐藏以切断多余的1px拉伸复选框（这是你不能看到FF的丑陋边界）

简单的HTML： (follow the link to review the css with comments, code block is to satisfy stackoverflow) http://jsfiddle.net/KQghJ/
```
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>
```
解决方案＃2使用“Checkbox Toggle Hack”切换DIV的CSS状态，该状态已经在浏览器中正确定位，并使用简单的sprite设置复选框未选中和已检查状态 . 所需要的只是使用Checkbox Toggle Hack调整背景位置 . 在我看来，这是更优雅的解决方案，因为您可以更好地控制您的复选框和无线电，并且可以保证它们在浏览器中看起来相同 .

简单的HTML： (follow the link to review the CSS with comments, code block is to satisfy StackOverflow) http://jsfiddle.net/Sx5M2/
```
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>
```
如果有人不同意这些方法，请给我留言，我很乐意听到一些关于为什么其他人没有遇到这些解决方案的反馈，或者如果他们有，为什么我在这里看不到任何答案呢？如果有人看到其中一种方法失败，那么也很高兴看到这些，但是这些已经在最新的浏览器中进行了测试，并依赖于相当古老的HTML / CSS方法，并且我已经看到了它的普遍性 .
回复于 2024-04-28T09:59:20+08:00
18
我认为这是最简单的方法
```
input {
    position: relative;
    top: 1px;
}
```
Fiddle
回复于 2024-04-28T09:59:20+08:00

CSS：

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML：

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

上面的代码会将您的列表项放在三个库中，只需更改宽度即可 .

回复于 2024-04-28T09:59:20+08:00

input[type=checkbox]
{
    vertical-align: middle;
}

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

回复于 2024-04-28T09:59:20+08:00

有时vertical-align需要彼此相邻的两个内联（span，label，input等）元素才能正常工作 . 以下复选框在IE，Safari，FF和Chrome中正确垂直居中，即使文本大小非常小或很大 .

它们都在同一行上彼此相邻浮动，但nowrap意味着整个标签文本始终位于复选框旁边 .

缺点是额外无意义的SPAN标签 .

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

现在，如果你有一个非常长的标签文本需要包装而不包装在复选框下，你可以在标签元素上使用填充和负文本缩进：

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

回复于 2024-04-28T09:59:20+08:00

36

我不喜欢相对定位，因为它使元素在其级别上呈现在其他所有内容之上（如果你有复杂的布局，它可以在某些东西之上） .

我发现 vertical-align: sub 使复选框在Chrome，Firefox和Opera中看起来很好 . 可以't check Safari since I don' t有MacOS和IE10稍微关闭，但我发现它对我来说是足够好的解决方案 .

另一种解决方案可能是尝试为每个浏览器制作特定的CSS，并使用％/ pixels / EMs中的一些vertical-align对其进行微调：http://css-tricks.com/snippets/css/browser-specific-hacks/

回复于 2024-04-28T09:59:20+08:00
1
经过一个多小时的调整，测试和尝试不同风格的标记，我想我可能有一个不错的解决方案 . 该特定项目的要求是：
- 输入必须在他们自己的行上 .
- 复选框输入需要与标签文本垂直对齐（如果不是所有浏览器都相同） .
- 如果标签文本换行，则需要缩进（因此不会在复选框下面进行换行） .
在我做出任何解释之前，我会给你代码：
```
label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
```
```
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>
```
这是JSFiddle中的工作示例 .

此代码假设您正在使用像Eric Meyer这样的重置，它不会覆盖表单输入边距和填充（因此在输入CSS中放置边距和填充重置） . 显然，在实时环境中，你可能会嵌套/覆盖一些东西以支持其他输入元素，但我想保持简单 .

注意事项：
- *overflow 声明是内联IE黑客（明星属性黑客） . IE 6和7都会注意到它，但Safari和Firefox会正确地忽略它 . 我认为它可能是有效的CSS，但你最好还是有条件的评论;只是为了简单而使用它 .
- 我可以说，唯一的 vertical-align 语句在浏览器中是一致的 vertical-align: bottom . 在Safari，Firefox和IE中设置此值然后向上相对定位几乎完全相同，只有一两个像素差异 .
- 使用对齐的主要问题是IE在输入元素周围粘贴了一堆神秘的空间 . 这不是持久的 . 在复选框上设置宽度和高度然后 overflow: hidden 由于某种原因切断了额外的空间并允许IE的定位与Safari和Firefox非常相似 .
- 根据您的文字大小，您无疑需要调整相对位置，宽度，高度等，以使事物看起来正确 .
希望这有助于其他人！我没有在我今天早上工作的任何项目上尝试过这种特定的技术，所以如果你发现一些工作更加一致的话，肯定会搞定 .
回复于 2024-04-28T09:59:20+08:00
3
工作One Crayon's solution，我有一些对我有用的东西，更简单：
```
input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] {
  bottom: 2px;
}
```
```
<label>
  <input type="checkbox">
  Label text
</label>
```
在Safari（我相信其基线）中，像素对像素的渲染方式相同，Firefox和IE7都检查得很好 . 它也适用于各种标签字体，无论大小 . 现在，修复IE的选择和输入基线......
回复于 2024-04-28T09:59:20+08:00
1
对我来说唯一完美的解决方案是：
```
input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}
```
今天在Chrome，Firefox，Opera，IE 7和8中进行了测试 . 示例： Fiddle
回复于 2024-04-28T09:59:20+08:00

179

输入类型复选框包含在标签内并向左浮动，如下所示：

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

这对我有用：

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

确保高度与（blocklevel）的行高相同 .

回复于 2024-04-28T09:59:20+08:00

这适合我：

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

回复于 2024-04-28T09:59:20+08:00

1
如果您使用 ASP.NET Web Forms ，则无需担心DIV和其他元素或固定大小 . 我们可以通过将 float:left 设置为CSS中的CheckboxList输入类型来对齐 <asp:CheckBoxList> 文本 .

请检查以下示例代码：
```
.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}
```
.ASPX code:
```
<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>
```
回复于 2024-04-28T09:59:20+08:00

position: relative; 在IE中有一些问题，包括z-index和jQuery的slideUp / slideDown等动画 .

CSS：

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery的：

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

样式可能需要调整，具体取决于 <label> 中使用的字体大小

PS：
我使用ie7js使css在IE6中工作 .

回复于 2024-04-28T09:59:20+08:00

163

尝试我的解决方案，我在IE 6，FF2和Chrome中尝试了它，它在所有三个浏览器中逐个像素地渲染 .

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

回复于 2024-04-28T09:59:20+08:00

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

诀窍是只在表格单元格中使用vertical-align，如果使用label标签则使用内联块 .

回复于 2024-04-28T09:59:20+08:00

如何一致地跨浏览器对齐复选框及其标签

30 回答

相关问题