如何使用 CSS 在跨浏览器上对齐复选框及其标签?
Web 表单在现代网站中广泛使用。对于 Web 表单，我们有一个称为复选框的通用元素。然而，在不同的浏览器中对齐这些复选框及其标签是一项艰巨的任务。这是因为它在不同的浏览器和设备上的显示可能有所不同。在复选框的显示方面，不同的浏览器可能具有略微不同的样式和渲染方法。为了解决这个问题，我们将讨论在跨浏览器中使用 CSS 对齐复选框及其标签的不同方法。
复选框如何在不同的浏览器中显示?
不同的浏览器对 Web 表单中复选框的兼容性不同。在 Internet Explorer 中，复选框的外观取决于版本。旧版本不支持最新的 CSS 功能，因此很难对齐复选框及其标签。同样适用于 Mozilla Firefox 和 Safari 版本。
因此，为了确保复选框和标签的显示一致性和正确对齐，我们必须在 CSS 中使用跨浏览器兼容性技术。
注意 - 在创建 Web 表单时，将 for 属性与任何类型的输入元素一起使用通常是一种很好的做法。这可以确保复选框及其标签对齐。始终确保 <label> 的 for 属性值与 <input> 的 id 属性值相同。
我们有多种 CSS 技术和实践，可确保复选框和标签在不同平台上正确对齐。下面将讨论其中一些。
使用 Vertical-align 设置复选框样式
结合使用 display 和 Vertical-align 属性，我们可以对齐复选框及其标签。
示例
此处，"display: inline-block" 属性使我们能够将复选框的显示类型设置为内联块。而 "vertical-align: middle" 属性将使复选框与其容器垂直居中对齐。
同时使用这两个属性将确保复选框与其他元素对齐显示，并在行中间对齐。因此，复选框及其标签将在同一行对齐，并使标签文本与复选框保持居中对齐。
<html>
<head>
<style>
input[type="checkbox"] {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<h2> Checkbox </h2>
<div class="container">
<label for="demo">
<input type="checkbox" id="demo"> Option 1 </label>
<br>
<label for="demo">
<input type="checkbox" id="demo"> Option 2 </label>
</div>
</body>
</html>
使用 CSS 弹性框
我们可以将 <label> 元素设置为弹性容器，以便对齐复选框和标签。
示例
在此示例中，我们使用 display: flex 将标签元素设置为弹性容器。align-items: center 属性将标签文本与复选框居中对齐。
虽然我们对输入元素使用了 flex: none 来确保复选框的宽度不会随着标签(容器)大小的变化而变化。结合使用这三个属性，可以使复选框和标签彼此居中对齐。
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
padding: 2px;
}
input[type=checkbox] {
flex: none;
}
</style>
</head>
<body>
<h2> Fruits </h2>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Mango </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Banana </label>
</div>
</body>
</html>
使用 Vertical-align 属性
在某些现代浏览器中，复选框默认与标签文本的基线对齐。但是，为了确保它们正确对齐，我们可以将标签和输入元素的 vertical-align 属性设置为 "top"。
示例
在下面的示例中，我们使用 "display: inline-block" 属性将标签 (class= "container") 和输入元素显示为内联块元素。这使得这两个元素都成为内联元素，并且尺寸可以调整。
"input[type="checkbox"]" 是一个选择器，用于选择或匹配复选框类型的输入元素。
此外，我们还使用了 "vertical-align: top" 属性将元素垂直对齐到其容器的顶部。对标签和输入元素同时使用这些属性可确保它们都在容器顶部垂直对齐，并且彼此对齐显示。
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
margin-right: 15px;
letter-spacing: 1px;
}
input[type="checkbox"] {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h2> Programming Languages </h2>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> JavaScript </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Python </label>
</div>
</body>
</html>
使用 Position 和 Vertical-align 属性
将输入元素的 position 设置为 relative，并使用 vertical-align: bottom 属性也可以对齐复选框和标签。
示例
这里，我们将标签设置为 block 元素，使其占据容器的整个宽度。移除输入元素的 padding 和 margin。vertical-align: bottom 属性使复选框垂直对齐容器底部。position 属性用于将复选框与标签对齐。
<html>
<head>
<style>
CSS code * {
padding: 0;
margin: 0;
}
.container {
display: block;
padding-left: 20px;
}
input {
width: 17px;
height: 17px;
vertical-align: bottom;
position: relative;
top: -1px;
}
</style>
</head>
<body>
<h2> Programming Languages </h2>
<br>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> JavaScript </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Python </label>
</div>
</body>
</html>
结论
Web 表单是 Web 开发中广泛使用的基本组件。为了使其跨浏览器兼容，我们应该确保输入框和标签元素的对齐方式正确。这将使您的网站在所有浏览器和设备上都保持一致且专业的外观。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
