如何在浏览器中一致对齐复选框及其标签

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

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

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

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

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

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

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

当前回答

input {
    margin: 0;
}

真的很管用

其他回答

尝试垂直对齐：中间

而且你的代码看起来应该是：<表单>＜div＞<input id=“blah”type=“checkbox”><label for=“blah“>标签文本</label></div></form>

如果您使用ASP.NET Web表单，则无需担心DIV和其他元素或固定大小。我们可以通过将float:left设置为CSS中的CheckBoxList输入类型来对齐<asp:CheckBoxList>文本。

请检查以下示例代码：

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

.ASPX代码：

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

简单的解决方案：

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

在Chrome、Firefox、IE9+、Safari和iOS 9中测试+

输入[类型=复选框]{垂直对齐：中间；} <input id=“testCheckbox”name=“testCheckbox”type=“checkbox”><label for=“testCheckbox”>我应该对齐</label>

对我来说，唯一完美可行的解决方案是：

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

今天在Chrome、Firefox、Opera、IE 7和8中进行了测试。示例：Fiddle

推荐文章