这是一直困扰着我的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的重置,因此表单元素相对干净的覆盖。期待您提供的任何提示或技巧!
经过一个多小时的调整,测试和尝试不同风格的标记,我想我可能有一个不错的解决方案。该特定项目的要求是:
- 输入必须在他们自己的行上。
- 复选框输入需要在所有浏览器中与标签文本垂直对齐(如果不相同)。
- 如果标签文本换行,则需要缩进(因此不会在复选框下面进行换行)。
在我做出任何解释之前,我会给你代码:
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非常相似。
- 根据您的文本大小,您无疑需要调整相对位置,宽度,高度等,以使事物看起来正确。
希望这有助于其他人!我没有在我今天早上工作的任何项目上尝试过这种特定的技术,所以如果你发现一些工作更加一致的话,肯定会搞定。
有时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>
工作 一个蜡笔的解决方案,我有一些适合我的东西,更简单:
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的选择和输入基线......
一个似乎运作良好的简单方法是应用垂直对齐调整复选框的垂直位置。它仍然会因浏览器而异,但解决方案并不复杂。
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,Opera,IE 7和8中进行了测试。示例: 小提琴