如何对齐复选框及其标签始终交叉

这是不断困扰着我的小CSS问题之一。 堆栈溢出人员如何垂直对齐checkboxes及其labels 跨浏览器 ？ 每当我在Safari中正确对齐它们（通常在input上使用vertical-align: baseline ）时，它们在Firefox和IE中完全关闭。 在Firefox中修复它，Safari和IE无可避免地搞砸了。 每次我编写表单时，我都会浪费时间。

以下是我使用的标准代码：

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

---

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

输入必须在他们自己的路线上。

复选框输入需要与所有浏览器中的标签文本垂直对齐（如果不是相同的话）。

如果标签文本包装，它需要缩进（所以没有包装在复选框下面）。

在我解释任何解释之前，我只给你一些代码：

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>

---

有时垂直对齐需要两个内联（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>

---

从一个蜡笔小新的解决方案中脱颖而出，我有一些适合我的东西，而且更简单：

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>

链接地址: http://www.djcxy.com/p/1091.html

上一篇: How to align checkboxes and their labels consistently cross

下一篇: How do you override "