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


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

这是我使用的标准代码:

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

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


1508


起源


将每个复选框和标签放在<li>元素中。添加溢出:隐藏到<li>并向左浮动标签和复选框。然后他们都完美地对齐。不要明显地将复选框放在标签元素中。 - volume one
我用它来解决它 height 和 line-height 属性,看看 jsfiddle.net/wepw5o57/3 - TheGr8_Nik
操纵 position 和 top 会解决这个问题的例子: jsfiddle.net/ynkjc22s - Profesor08


答案:


经过一个多小时的调整,测试和尝试不同风格的标记,我想我可能有一个不错的解决方案。该特定项目的要求是:

  1. 输入必须在他们自己的行上。
  2. 复选框输入需要在所有浏览器中与标签文本垂直对齐(如果不相同)。
  3. 如果标签文本换行,则需要缩进(因此不会在复选框下面进行换行)。

在我做出任何解释之前,我会给你代码:

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非常相似。
  • 根据您的文本大小,您无疑需要调整相对位置,宽度,高度等,以使事物看起来正确。

希望这有助于其他人!我没有在我今天早上工作的任何项目上尝试过这种特定的技术,所以如果你发现一些工作更加一致的话,肯定会搞定。


914



注意。您应该在标签上添加“for”属性,以确保它适用于所有浏览器和文本阅读器。 (我意识到你可能因为简单而离开它) - Armstrongest
好悲伤,我没有意识到有多少人不知道这一点:如果你将输入包装在label标签中,那么“for”属性是不必要的。随意看看自己: w3.org/TR/html401/interact/forms.html#h-17.9.1 - One Crayon
哇,我也在这里认罪。围绕输入控制FTW的标签!从现在开始要做到这一点...... - cowgod
我不同意有关使用条件评论的建议。保持* foobar CSS hack。这很好用,像YUI这样的框架使用,并允许你将属于一起的东西保持在一起。 - ebruchez
尝试在Chrome 28,Mac OSX中使用,复选框明显低于文本 - MusikAnimal


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

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

缺点是额外无意义的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>


170



谢谢!输入和跨度上的“vertical-align:middle”对我来说非常有用。 - William Gross
display: block; float: left; 似乎是多余的 - PHPst
所以省略也不行 for 属性如果使用跨度? (如One Crayon在接受的答案中评论)w3.org/TR/html401/interact/forms.html#h-17.9.1 - parliament
在标签内输入时,不必使用for属性。它工作没有它。 - Tommy Sørensen
这应该是我认为的公认答案。不需要调整。 - Tim


工作 一个蜡笔的解决方案,我有一些适合我的东西,更简单:

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的选择和输入基线......


155



只是给别人留言:这在IE6中不起作用,因为它不支持[type = checkbox] CSS定位。 - One Crayon
如果需要IE6支持,您只需添加一个类而不是使用不受支持的选择器。 - HartleySan
根据我的测试,最好使用 bottom: 2px 对彼此而言 input[type=checkbox] 和 input[type=radio]。此外,这不应该在IE7中设置,因此我们可以通过星形黑客将其覆盖为0: bottom: 2px; *bottom: 0; - S.Serp
这个对我有用。但是,不是设置“position:relative; bottom:1px”,而是可以使用“margin:0 0 1px 0”来实现相同的结果。 - newman


一个似乎运作良好的简单方法是应用垂直对齐调整复选框的垂直位置。它仍然会因浏览器而异,但解决方案并不复杂。

input {
    vertical-align: -2px;
}

参考


117



这是所有其他版本中最小的变化,这对我在最新版本的浏览器中起作用。 - Johnny_D
这比使用更好 vertical-align 和 position: relative 因为它也正确地在IE9中工作:) - Dennis98
但它取决于font-size。对于较大的字体大小,必须将其调整为较高的负值,例如:vertical-align:-6px; - S.Serp


尝试 vertical-align: middle

您的代码似乎应该是:

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


77



<label for="blah"> 只有当你使用标签包装没有意义的东西时才有必要(就像一个文本框;我通常会使用 <label for="blah">Foo</label><input id="blah" type="text" /> 在那个例子中)。使用复选框,我发现包装它的标记较少。 - One Crayon
不完全正确:Label-for允许用户点击标签以选中复选框,只需单击复选框本身即可。将两个元素绑在一起非常方便。 - EndangeredMassa
如果输入嵌套在标签内,则单击标签,激活/将焦点放在输入上; for属性仅适用于未嵌套输入的情况。 - One Crayon
这是真的One Crayon,但使用“for”属性仍然是一个好习惯,否则你会遇到一些无法识别这种语法的浏览器的问题 咳嗽 IE浏览器。 - Armstrongest
如果您不希望您的复选框具有ID,则需要将复选框包装在标签内 - Simon_Weaver


尝试我的解决方案,我在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>


36



有趣;我喜欢浮动两个元素的想法;优雅地修复了包装问题。一世 上午 附加到带有标签的包装输入,但该代码比我到达的解决方案更清晰。 - One Crayon
在这个例子中,复选框输入和标签也应该具有属性display:block,在这种情况下,它们将被视为可以轻松对齐的普通DIV - se_pavel
这有一个问题,如果标签不适合可用空间会发生什么?标签和复选框是分开的(复选框是右上角,标签是左下角)。如果您将标签包装在标签内,则不会出现此问题。 - Enrique
它对像素没有用,但它足以让你在3种主流浏览器上看起来更好看。我想我可以再花一个小时才能看到它会更好...... - Alexis Wilke


对我来说唯一完美的解决方案是:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

今天在Chrome,Firefox,Opera,IE 7和8中进行了测试。示例: 小提琴


24



它无法在Chrome v43中运行 - Mert Metin
今天在Chrome和Safari中测试过并正常工作 - Buzogany Laszlo


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

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>

希望有所帮助。


16



对我来说唯一有用的,thx - vinidog