html - 跨浏览器如何始终对齐复选框和标签

  显示原文与译文双语对照的内容

这是我经常遇到的一个小的CSS问题。 StackOverflow周围的人如何垂直对齐复选框及其标签 跨浏览器? 当我在 Safari ( 通常在输入上使用 vertical-align: baseline ) 中正确地对齐它们时,它们在 Firefox 和 IE 中都是完全关闭的。 在 Firefox 中修复,Safari和 IE 不可避免地会被搞乱。 每次我编码表单时都会浪费时间。

下面是我使用的标准代码:


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

我通常使用迈耶的Eric重置,所以表单元素的替代比较干净。 期待你提供的任何提示或者技巧 !

时间:

有时vertical-align需要两个内联的( span,标签,输入等。) 元素才能正常工作。 下列复选框在 IE,Safari,FF和 Chrome 中垂直居中,即使文本大小很小或者较大。

它们在同一行上彼此浮动,但nowrap意味着整个标签文本总是留在复选框旁边。

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


<style type="text/css">
.checkboxes label {
 display: block;
 float: left;
 padding-right: 10px;
 white-space: nowrap;
}
.checkboxes input {
 vertical-align: middle;
}
.checkboxes label span {
 vertical-align: middle;
}
</style>

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

在标签上elements,现在,如果你有一个非常长的标签文字没有换行,你就会用空白和负的复选框下的文字要拆分需要 indent:


.checkboxes label {
 display: block;
 float: left;
 padding-right: 10px;
 padding-left: 22px;
 text-indent: -22px;
}

用一种蜡笔解决方法,我有一些适合我的东西,更简单:


input[type=checkbox], input[type=radio] {
 vertical-align: middle;
 position: relative;
 bottom: 1px;
}
input[type=radio] {
 bottom: 2px;
}

同时( 我信任的基线) 并选取一个 Firefox 和IE7看看这是这一切中pixel-for-pixel相同的呈现为好。 它也适用于各种标签字体大小,大和小。 现在,在选择和输入时修复 IE 基线。

一个很容易工作的事情是应用checkbox调整复选框的垂直位置。 它在浏览器中仍然会有所不同,但解决方案是不简单的。


input {
 vertical-align: -2px;
}

引用:http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-offset%20Content/example.html

尝试我的解决方案,我在 IE 6,FF2和 Chrome 中尝试了它,它在所有三个浏览器中通过像素呈现像素。


<style type="text/css">
* {
 padding: 0px;
 margin: 0px;
}
#wb {
 width: 15px;
 height: 15px;
 float: left;
}
#somelabel {
 float: left;
 padding-left: 3px;
}
</style>

<div>
 <input id="wb" type="checkbox"/>
 <label for="wb" id="somelabel">Web Browser</label>
</div>

尝试 vertical-align: middle

你的代码看起来应该是:


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

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


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

<style type="text/css">
label {
 line-height: 18px;
}
input {
 width: 13px;
 height: 18px;
 font-size: 12px;
 line-height: 12px;
}
</style>

希望有帮助

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


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

在 Chrome,Firefox,Opera,IE 7和 8中测试。 示例:http://jsfiddle.net/6Lf9eohs/6/

我从未遇到过这样的问题:


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

如果你使用的是 ASP.NET 网站表单,你不必担心div和其他元素或者固定大小。 在css,中我们可以通过设置 float:left<asp:CheckBoxList> 对齐的文本到CheckboxList输入款式 、

请检查以下示例代码:


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

网页里 。活动代码:


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

...