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

我们可以将<label>元素作为弹性容器来对齐复选框和标签。

示例

在这个示例中，我们使用display: flex将label元素设置为弹性容器。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>