这是困扰我的CSS小问题之一。

Stack Overflow周围的人如何在浏览器中始终垂直对齐复选框及其标签?

每当我在Safari中正确对齐它们(通常在输入上使用垂直对齐:基线),它们在Firefox和IE中就完全关闭了。

在Firefox中修复它,Safari和IE不可避免地被搞砸了。我每次编写表单时都在这上面浪费时间。

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

<表单><div><label><input-type=“checkbox”/>标签文本</label></div></form>

我通常使用埃里克·迈耶的重置,所以表单元素相对来说没有覆盖。期待您提供的任何提示或技巧!


当前回答

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>

上面的代码将把你的列表项放在三列中,只需改变宽度即可。

其他回答

我认为这是最简单的方法

输入{位置:相对;顶部:1px;}<表单><div><label><input-type=“checkbox”/>标签文本</label></div><表单>

在Chrome28OSX中,我选择了400+支持率的答案,这对我来说并不适用,可能是因为它没有在OSX中进行测试,或者在2008年回答这个问题时,它确实适用。

时代已经改变,新的CSS3解决方案现在是可行的。我的解决方案使用伪元素创建自定义复选框。因此,规定(无论你怎么看,是赞成还是反对)如下:

仅适用于现代浏览器(FF3.6+、IE9+、Chrome、Safari)依赖于自定义设计的复选框,该复选框将在每个浏览器/操作系统中呈现完全相同。这里我只是选择了一些简单的颜色,但你可以总是添加线性渐变,这样可以让它更具冲击力。调整为特定的字体/字体大小,如果更改,您只需更改复选框的位置和大小,使其看起来垂直对齐。如果调整正确,最终结果在所有浏览器/操作系统中应该仍然接近完全相同。无垂直对齐财产,无浮动在我的示例中必须使用所提供的标记,如果结构像问题一样,它将不起作用,但是,布局基本上看起来是一样的。如果您想四处移动,还必须移动关联的CSS

div.复选框{位置:相对;字体系列:Arial;字体大小:13px;}标签{位置:相对;向左填充:16px;}标签::之前{内容:“”;显示:内联块;宽度:10px;高度:10px;背景色:白色;边框:实心1px#9C9C9C;位置:绝对;顶部:1px;左:0px;}标签::之后{内容:“”;宽度:8px;高度:8px;背景色:#666666;位置:绝对;左:2px;顶部:3px;显示:无;}输入[类型=复选框]{可见性:隐藏;位置:绝对;}input[类型=复选框]:选中+标签::之后{显示:块;}输入[类型=复选框]:活动+标签::之前{背景色:#DDDDD;}<表单><div class=“checkbox”><input id=“check_me”type=checkbox/><label for=“check_me”>复选框的标签</label></div></form>

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

如果你感兴趣,这里是我对单选按钮的看法:http://jsfiddle.net/DtKrV/2/

希望有人觉得这很有用!

输入类型复选框包装在标签内并向左浮动,如下所示:

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

确保的高度与(块级别)的线高度相同。

如果您使用的是Twitter Bootstrap,您可以只使用<label>上的复选框类:

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

谢谢!这也一直让我发疯。

在我的特殊情况下,这对我很有用:

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,这可能会解释一些差异,但这似乎对我很有用。