复选框上的标签不对齐 - CSS答案

【问题标题】：Label on checkbox doesn't line up- CSS复选框上的标签不对齐 - CSS
【发布时间】：2017-01-24 13:25:30
【问题描述】：

我正在努力完善我的表单布局。

由于某种原因，我的复选框上的标签不会在每个复选框上相互对齐。

我正在尽力使用 ff 代码使每个复选框标签位于其复选框：

<div class="form-input-group">
    <i class="fa fa-book"></i>
    <div class="checkbox-style">
         <input type="checkbox" value=""> Math &nbsp;
         <input type="checkbox" value=""> Science &nbsp;
         <input type="checkbox" value=""> English &nbsp;
    </div>
</div>

知道出了什么问题以及如何解决这个问题吗？

您可以在此处查看实际站点：http://americanbitcoinacademy.com/test/student-registration.html 通过 Chrome 的检查器工具。

【问题讨论】：

标签： html css checkbox

【解决方案1】：

更新这个 css，这将解决你的问题，style.css , line number 1163

.sign-up .signup-form .form-input-group input[type="checkbox"] {
   height: 27px;
   margin-top: 0;
   position: relative;
   top: 8px;
   width: 20px;
}

【讨论】：

【解决方案2】：

在styles.css on like 1166（对于.sign-up .signup-form .form-input-group input[type="checkbox"]），将margin-top:15px;更改为margin:0;

然后在 style.css 中像 1168 一样，为 .checkbox-style 添加 display: flex; align-items: center; height: 100%;

【讨论】：

height: 100% 将表单拉伸得非常长... Flex 使其垂直堆叠。 align-items 什么都不做。

【解决方案3】：

有很多方法可以得到你想要的。我的方法是在父元素上使用填充而不是在子元素上使用边距。

在第 1163 行，删除 margin-top 并添加 vertical-align 和 margin：

.sign-up .signup-form .form-input-group input[type="checkbox"] {
  width: 20px;
  height: 27px;
  vertical-align: middle;
  margin: 0;
}

然后在第 1170 行添加填充以替换 margin-top 规则：

.checkbox-style {
  font-size: 15px;
  margin-left: 70px;
  padding-top: 15px;
}

这些变化让你得到这个：

【讨论】：