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

Question

这是一直困扰我的小 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 的重置，因此表单元素相对而言没有覆盖。期待您提供的任何提示或技巧！

score 1033 · Accepted Answer

警告！这个答案太旧了，不适用于现代浏览器。

_{我不是这个答案的发布者，但在撰写本文时，这是迄今为止在正面和负面投票中投票最多的答案（+1035 -17），它仍然被标记为接受的答案（可能是因为问题的原始海报是写这个答案的人）。}

正如评论中已经多次指出的那样，这个答案不再适用于大多数浏览器（并且自 2013 年以来似乎没有这样做）。

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

输入必须在自己的行上。
复选框输入需要在所有浏览器中以类似方式（如果不相同）与标签文本垂直对齐。
如果标签文本换行，则需要缩进（因此不要在复选框下方换行）。

在我进行任何解释之前，我将给你代码：

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 hack（star-property hack）。IE 6 和 7 都会注意到它，但 Safari 和 Firefox 会正确地忽略它。我认为它可能是有效的 CSS，但最好还是使用条件注释；只是为了简单起见。
据我所知，唯一vertical-align在浏览器中一致的语句是vertical-align: bottom. 在 Safari、Firefox 和 IE 中设置这个然后相对向上定位的行为几乎相同，只有一两个像素的差异。
使用对齐的主要问题是 IE 在输入元素周围贴了一堆神秘的空间。它不是填充或边距，它是该死的持久性。在复选框上设置宽度和高度，然后overflow: hidden由于某种原因切断了额外的空间，并允许 IE 的定位与 Safari 和 Firefox 非常相似。
根据您的文本大小，您无疑需要调整相对位置、宽度、高度等，以使内容看起来正确。

希望这对其他人有帮助！除了我今天早上工作的项目之外，我还没有在任何项目上尝试过这种特定的技术，所以如果你发现一些更一致的东西，一定要努力。

警告！这个答案太旧了，不适用于现代浏览器。

score 254 · Accepted Answer

有时垂直对齐需要两个相邻的内联（跨度、标签、输入等）元素才能正常工作。以下复选框在 IE、Safari、FF 和 Chrome 中正确垂直居中，即使文本大小非常小或大。

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

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

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

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

现在，如果您有一个很长的标签文本需要在复选框下方换行而不换行，您将在标签元素上使用填充和负文本缩进：

.checkboxes label {
  display: block;
  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><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label><input type="checkbox"> <span>Label text y</span></label>
    <label><input type="checkbox"> <span>Label text z</span></label>
  </div>
</form>

score 199 · Accepted Answer

使用One Crayon 的解决方案，我有一些对我有用且更简单的东西：

.font2 {font-family:Arial; font-size:32px} /* Sample font */

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>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

在 Safari（我信任其基线）中逐个像素地渲染相同的像素，并且 Firefox 和 IE7 都很好。它也适用于各种大小的标签字体大小。现在，为了修复 IE 在选择和输入上的基线...

更新：（第三方编辑）

正确的bottom位置取决于字体系列和字体大小！我发现使用bottom: .08em;复选框和单选元素是一个很好的通用值。我在 Chrome/Firefox/IE11 中使用 Arial 和 Calibri 字体在 Windows 中使用几种小/中/大字体大小对其进行了测试。

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

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

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

score 158 · Accepted Answer

一件似乎效果很好的简单事情是使用垂直对齐来调整复选框的垂直位置。它仍然会因浏览器而异，但解决方案并不复杂。

input {
    vertical-align: -2px;
}

参考

score 94 · Accepted Answer

尝试vertical-align: middle

您的代码也应该是：

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

score 40 · Accepted Answer

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

score 28 · Accepted Answer

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

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

今天在 Chrome、Firefox、Opera、IE 7 和 8 中进行了测试。示例：Fiddle

score 25 · Accepted Answer

我还没有完全测试我的解决方案，但它似乎工作得很好。

我的 HTML 很简单：

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

然后我将所有复选框设置24px为高度和宽度。为了使文本对齐，我也制作了标签line-height并像这样24px分配：vertical-align: top;

编辑：在 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;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

如果有人发现这不起作用，请告诉我。这是它的实际效果（在 Chrome 和 IE 中 - 很抱歉，因为屏幕截图是在视网膜上拍摄的，并且对 IE 使用了相似之处）：

复选框的屏幕截图：Chrome 复选框截图：IE

score 21 · Accepted Answer

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

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>

希望有帮助。

score 19 · Accepted Answer

最后我们来看看问题的根源

复选框是使用图像呈现的（可以通过 CSS 设置自定义的）。这是 FireFox 中的一个（未选中）复选框，用 DOM 检查器突出显示：

这是 Chrome 中相同的无样式复选框：

可以看到边距（橙色）；填充不存在（将显示为绿色）。那么复选框右侧和底部的伪边距是什么？这些是用于复选框的图像的一部分。这就是为什么使用 justvertical-align: middle还不够，这就是跨浏览器问题的根源。

那么我们能做些什么呢？

一个明显的选择是——替换图像！幸运的是，可以通过 CSS 实现这一点，并用外部图像、base64 (in-CSS) 图像、in-CSS svg 或只是伪元素替换它们。这是一种强大的（跨浏览器！）方法，这是从这个问题中窃取的这种调整的一个例子：

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

您可能想阅读一些有关此类样式的更深入的文章，例如此处列出的一些文章；它超出了这个答案的范围。

好的，仍然没有自定义图像或伪元素解决方案呢？

TL；DR：看起来这不起作用，请改用自定义复选框

首先，让我们注意，如果在其他浏览器中复选框图标内的那些伪边距是任意的，则没有一致的解决方案。要构建一个，我们必须在现有浏览器中探索此类图像的解剖结构。

那么哪些浏览器在复选框中有伪边距？我检查了 Chrome 75、Vivaldi 2.5（基于 Chromium）、FireFox 54（不要问为什么这么过时）、IE 11、Edge 42、Safari ?? （借了一分钟，忘记查看版本）。只有 Chrome 和 Vivaldi 有这样的伪边距（我怀疑所有基于 Chromium 的浏览器，比如 Opera）。

这些伪边距的大小是多少？要弄清楚这一点，可以使用缩放复选框：

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

我的结果是宽度/高度的约 7%，因此绝对单位为 0.9-1.0px。但是，准确性可能会受到质疑：尝试zoom复选框的不同值。在我对 Chrome 和 Vivaldi 的测试中，伪边距的相对大小在zoom值 10、20 和值 11-19 (??) 时非常不同：

scale似乎更一致：

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

所以可能 ~14% 和 2px 是正确的值。

现在我们知道（？）伪边距的大小，让我们注意这还不够。所有浏览器的复选框图标的大小是否相同？唉! 以下是 DOM 检查器为无样式复选框显示的内容：

火狐：13.3px
基于 Chromium：12.8px表示整个事物，因此 12.8 (100% - 14%) = 11px表示在视觉上被视为复选框
IE 11，边缘：13px
Safari：不适用（我相信这些应该在同一个屏幕上进行比较）

现在在我们讨论任何解决方案或技巧之前，让我们问一下：什么是正确的对齐方式？我们想要达到什么目的？在某种程度上，这是一个品味问题，但基本上我可以想到以下“不错”的对齐方面：

同一基线上的文本和复选框（我故意不在这里调整复选框大小）：

或在小写字母方面具有相同的中间线：

或大写字母的相同中间线（更容易看出不同字体大小的差异）：

我们还必须决定复选框的大小是否应该等于小写字母、大写字母或其他字母的高度（更大、更小或介于小写和大写之间）。

对于本次讨论，如果复选框与文本在同一基线上并且具有大写字母的大小（一个非常有争议的选择），我们称对齐为好：

现在我们需要什么工具：

调整复选框大小
使用伪边距复选框识别 Chromium 并设置特定样式
调整复选框/标签垂直对齐

?

关于复选框大小调整：有width, height, size, zoom, scale（我错过了什么吗？）。zoom并且scale不允许设置绝对大小，因此它们可能仅有助于调整文本大小，而不是设置跨浏览器大小（除非我们可以编写特定于浏览器的规则）。size不适用于 Chrome（它是否适用于旧 IE？无论如何，它并不那么有趣）。width并且height在 Chrome 和其他浏览器中工作，所以我们可以设置一个共同的大小，但同样，在 Chrome 中它设置整个图像的大小，而不是复选框本身。注意：定义复选框大小的是 minimum(width, height) （如果宽度≠高度，则将复选框正方形之外的区域添加到“伪边距”）。

不幸的是，据我所知，Chrome 复选框中的伪边距对于任何宽度和高度都没有设置为零。
恐怕这些天没有可靠的纯 CSS 方法。
让我们考虑垂直对齐。当设置为或由于 Chrome 的伪边距vertical-align时无法给出一致的结果，为所有浏览器获得相同“坐标系”的唯一真正选择是将标签和输入对齐：middlebaselinetop

（上图：vertical-align: top, bottom and bottom without box-shadow）

那么我们从中得到什么结果呢？

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

上面的代码片段适用于 Chrome（基于 Chromium 的浏览器），但其他浏览器需要较小尺寸的复选框。似乎不可能以一种围绕 Chromium 的复选框图像怪癖的方式调整大小和垂直对齐方式。我的最后建议是：改用自定义复选框——这样你就可以避免沮丧:)

score 14 · Accepted Answer

现在所有现代浏览器都支持 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>

这是完整的前缀版本演示：

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>

score 13 · Accepted Answer

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

诀窍是仅在表格单元格或内联块中使用垂直对齐（如果使用标签标记）。

score 13 · Accepted Answer

我认为这是最简单的方法

input {
    position: relative;
    top: 1px;
}

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

score 10 · Accepted Answer

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

我发现这vertical-align: sub使得复选框在 Chrome、Firefox 和 Opera 中看起来足够好。无法检查 Safari，因为我没有 MacOS 并且 IE10 稍微有些偏离，但我发现它对我来说已经足够好。

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

score 9 · Accepted Answer

这对我很有效：

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>

score 8 · Accepted Answer

在 Chrome 28 OSX 中，选择的 400+ 投票的答案对我不起作用，可能是因为它没有在 OSX 中进行测试，或者它在 2008 年回答这个问题时确实有效。

时代变了，新的 CSS3 解决方案现在是可行的。我的解决方案使用伪元素来创建自定义复选框。所以规定（优点或缺点，不管你怎么看）如下：

仅适用于现代浏览器（FF3.6+、IE9+、Chrome、Safari）
依赖于一个定制设计的复选框，它将在每个浏览器/操作系统中呈现完全相同。在这里，我刚刚选择了一些简单的颜色，但您总是可以添加线性渐变等，以使其更加出色。
适用于特定的字体/字体大小，如果更改，您只需更改复选框的位置和大小，使其显示为垂直对齐。如果调整正确，最终结果在所有浏览器/操作系统中仍应接近完全相同。
没有垂直对齐属性，没有浮动
必须在我的示例中使用提供的标记，如果结构像问题，它将不起作用，但是，布局看起来基本相同。如果你想移动东西，你还必须移动相关的 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;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

此解决方案隐藏复选框，并向标签添加伪元素并设置其样式以创建可见复选框。因为标签绑定到隐藏的复选框，所以输入字段仍然会更新，并且值将与表单一起提交。

如果您有兴趣，这是我对单选按钮的看法：http: //jsfiddle.net/DtKrV/2/

希望有人觉得这很有用！

score 6 · Accepted Answer

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

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

score 6 · Accepted Answer

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

请检查以下示例代码：

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX 代码：

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

score 3 · Accepted Answer

将输入类型复选框包裹在标签内并像这样向左浮动：

<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) 的行高相同。

score 3 · Accepted Answer

如果您使用的是 Twitter Bootstrap，您可以使用以下checkbox类<label>：

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

score 3 · Accepted Answer

硬编码复选框的高度和宽度，删除其填充，并使其高度加上垂直边距等于标签的行高。如果标签文本是内联的，则浮动复选框。Firefox、Chrome 和 IE7+ 都以相同的方式呈现以下示例：http ://www.kornea.com/css-checkbox-align

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

我通常不标记复选框，然后将其“标签”作为单独的元素。这很痛苦，但是在显示复选框及其标签的方式之间存在很大的跨浏览器差异（正如您已经注意到的），这是我可以接近控制一切外观的唯一方法。

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

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

score 2 · Accepted Answer

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>

上面的代码会将您的列表项放在三个列中，并更改宽度以适应。

score 2 · Accepted Answer

所以我知道这已经被回答了很多次，但我觉得我有一个比已经提供的更优雅的解决方案。不仅有 1 个优雅的解决方案，还有 2 个单独的解决方案来满足您的喜好。话虽如此，您需要知道和看到的所有内容都包含在 2 JS Fiddle's 中，并带有注释。

解决方案 #1 依赖于给定浏览器的本机“复选框”，尽管有一点扭曲......它包含在一个 div 中，该 div 更容易定位跨浏览器，带有溢出：隐藏以砍掉多余的 1px 拉伸复选框（这样你就看不到FF丑陋的边框了）

简单的HTML：（按照链接查看带有注释的css，代码块是为了满足stackoverflow） http://jsfiddle.net/KQghJ/

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

解决方案 #2 使用“Checkbox Toggle Hack”来切换 DIV 的 CSS 状态，该状态已在浏览器中正确定位，并使用简单的精灵设置复选框未选中和选中状态。所需要的只是使用上述 Checkbox Toggle Hack 调整背景位置。在我看来，这是更优雅的解决方案，因为您可以更好地控制复选框和收音机，并且可以保证它们在浏览器中看起来相同。

简单的 HTML：（按照链接查看带有注释的 CSS，代码块是为了满足 StackOverflow） http://jsfiddle.net/Sx5M2/

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

如果有人不同意这些方法，请给我留言，我很想听听一些反馈，说明为什么其他人没有遇到这些解决方案，或者如果他们有，为什么我在这里看不到关于它们的答案？如果有人看到其中一种方法失败了，也很高兴看到，但是这些方法已经在最新的浏览器中进行了测试，并且依赖于我所看到的非常古老且通用的 HTML / CSS 方法。

score 2 · Accepted Answer

下面给出了跨浏览器的像素完美一致性，甚至是 IE9：

该方法非常明智，显而易见：

创建一个输入和一个标签。
将它们显示为块，以便您可以随意浮动它们。
将高度和行高设置为相同的值，以确保它们居中并垂直对齐。
对于em测量，要计算元素的高度，浏览器必须知道这些元素的字体高度，并且它本身不能在 em 测量中设置。

这导致了一个全球适用的一般规则：

input, label {display:block;float:left;height:1em;line-height:1em;}

字体大小可根据表单、字段集或元素进行调整。

#myform input, #myform label {font-size:20px;}

在 Mac、Windows、Iphone 和 Android 上的最新 Chrome、Safari 和 Firefox 中测试。和IE9。

此方法可能适用于所有不高于一行文本的输入类型。应用类型规则以适应。

score 1 · Accepted Answer

耶，谢谢！这也一直让我发疯。

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

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 这可能会解释一些差异，但这似乎对我来说效果很好。

score 1 · Accepted Answer

这不是解决问题的最佳方式

vertical-align: middle

添加style="position:relative;top:2px;"到输入框会将其向下移动2px。因此，根据您的字体大小，您可以移动它。

score 1 · Accepted Answer

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 中工作。

score 1 · Accepted Answer

简单地使用vertical-align: sub，正如pokrishka已经建议的那样。

小提琴

HTML 代码：

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

CSS 代码：

.checkboxes input {
    vertical-align: sub;
}

score 1 · Accepted Answer

简单的解决方案：

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

在 Chrome、Firefox、IE9 +、Safari、iOS 9+中测试

score 0 · Accepted Answer

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

无论如何，您应该将组合在一起的表单控件包装在它们自己的字段集中，在这里，它播放 wrappa。设置输入/标签做显示：块，输入浮动左，标签浮动右，设置你的宽度，控制间距与左/右边距，相应地对齐标签文本。

所以

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
}

您可能还需要为跨浏览器/媒体解决方案设置边框、轮廓和行高。

score 0 · Accepted Answer

也许有些人犯了和我一样的错误？这是...我已经为输入框设置了一个宽度，因为它们大多是 'text' 类型，但后来忘记覆盖复选框的宽度 - 所以我的复选框试图占据很多多余的宽度和所以很难在它旁边对齐标签。

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}

<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

早在 IE6（使用类选择器）和 Firefox、Safari 和 Chrome 的最新版本中就提供可点击的标签和正确的对齐方式

score 0 · Accepted Answer

我发现我可以排列它们的唯一方法是使用绝对位置作为输入。玩弄输入的顶部变量得到了我想要的结果。

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}

score 0 · Accepted Answer

label {
    display: inline-block;
    padding-right: 10px;
}
input[type=checkbox] {
    position: relative;
    top: 2px;
}

score 0 · Accepted Answer

0

最简单的解决方案是

input {
  vertical-align: text-top;
}

于 2021-11-17T12:30:48.370 回答

score -1 · Accepted Answer

我发现了一种在几乎所有浏览器中都给出相同结果的方法。至少是最新的浏览器。它适用于 Firefox、Chrome、Safari、Opera。在 IE 中，它看起来几乎就像没有为输入或标签应用规则（即，它仍然在输入下方有几个像素的标签），所以我认为这是可以原谅的。

HTML

<label class="boxfix"><input type="radio">Label</label>

CSS

.boxfix {
    vertical-align: bottom;
}
.boxfix input {
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}

score -1 · Accepted Answer

为了与跨浏览器的表单字段保持一致，我们使用：box-sizing:border-box

button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

score -1 · Accepted Answer

试试这个代码

input[type="checkbox"] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    margin-left:3px;
    border:0;
    vertical-align: middle;
    top: -1px;
    bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    background: #fff;
}

score -2 · Accepted Answer

-2

input {
    margin: 0;
}

实际上可以解决问题

于 2010-02-23T13:16:32.877 回答

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

40 回答 40

警告！这个答案太旧了，不适用于现代浏览器。

警告！这个答案太旧了，不适用于现代浏览器。

最后我们来看看问题的根源

那么我们能做些什么呢？

好的，仍然没有自定义图像或伪元素解决方案呢？

Related

Reference