这是困扰我的 CSS 的小问题之一。 Stack Overflow 周围的人们如何垂直对齐checkboxes
并且他们的labels
始终跨浏览器 ?每当我在 Safari 中正确对齐它们(通常在input
上使用vertical-align: baseline
)时,它们在 Firefox 和 IE 中就完全关闭了。在 Firefox 中对其进行修复,不可避免地将 Safari 和 IE 弄乱了。每次编写表单时,我都会在此上浪费时间。
这是我使用的标准代码:
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
我通常使用 Eric Meyer 的重置,因此表单元素相对而言是覆盖不大的。期待您提供的任何提示或技巧!
经过一个多小时的调整,测试和尝试不同样式的标记,我认为我可能有一个不错的解决方案。该特定项目的要求是:
在进行任何解释之前,我只为您提供代码:
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(星级属性 hack)。 IE 6 和 7 都会注意到它,但是 Safari 和 Firefox 将适当地忽略它。我认为这可能是有效的 CSS,但条件注释会更好。只是为了简单起见使用它。 vertical-align
语句是vertical-align: bottom
。在 Safari,Firefox 和 IE 中,设置此值然后相对向上定位几乎相同,只有一个或两个像素差异。 overflow: hidden
出于某种原因overflow: hidden
切断多余的空间,并使 IE 的定位与 Safari 和 Firefox 非常相似。 希望这对别人有帮助!除了今天早上正在研究的项目之外,我没有在任何项目上尝试过这种特定技术,因此,如果您发现更稳定的方法,请务必进行尝试。
有时,垂直对齐需要两个相邻的内联元素(跨度,标签,输入等)才能正常工作。以下复选框在 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 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;
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 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 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>
在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;
复选框和单选元素具有很好的一般价值。我在带有 Arial 和 Calibri 字体的 Windows 中的 Chrome / Firefox / IE11 中使用几种小 / 中 / 大字体对它进行了测试。
.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>
看起来不错的一件容易的事是使用 vertical-align 调整复选框的垂直位置。跨浏览器,它仍然会有所不同,但是解决方案并不复杂。
input {
vertical-align: -2px;
}
尝试vertical-align: middle
您的代码似乎也应该是:
<form>
<div>
<input id="blah" type="checkbox"><label for="blah">Label text</label>
</div>
</form>
尝试我的解决方案,我在 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>
对我来说,唯一完美的解决方案是:
input[type=checkbox], input[type=radio] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
今天测试在 Chrome,Firefox,歌剧,IE 7 和 8 实施例: 小提琴
我通常使用行高来调整静态文本的垂直位置:
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>
希望能有所帮助。
我还没有完全测试我的解决方案,但是它似乎工作得很好。
我的 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 使用并行表示歉意):
<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>
诀窍是仅在表单元格中使用垂直对齐方式,如果使用标签标签,则仅在行内块中使用。