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

Question

我试图完善我的表单布局。

出于某种原因，我的复选框上的标签在每个复选框上都不会相互排列。

我正在尽力使用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的检查工具。

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

Answer 2

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

然后在类似1168的style.css中，.checkbox-style添加display: flex; align-items: center; height: 100%;

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

这些改变让你知道：