复选框上的标签没有对齐 - CSS

Question

我在尝试完善我的表单布局。

由于某些原因，我的复选框标签无法在每个复选框上对齐。

我正在尝试使用以下代码使每个复选框标签与其复选框对齐：

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

你知道出了什么问题，我该怎么解决这个问题吗？

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

- user6925364

Answer 1

更新这个css文件，可以解决你的问题，style.css, 1163行

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

- Jishnu V S

Answer 2

在 styles.css 的第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%;

- Michael Coker

---

height: 100% 会使表单变得非常长... Flex 可以使其垂直堆叠。 align-items 没有任何作用。 - Joseph Kreifels II

Answer 3

有很多方法可以得到你想要的东西。我的方法是在父元素上使用padding而不是在子元素上使用margin。

在第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行添加padding以替换margin-top规则：

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

这些更改会给你带来以下结果：

- But those new buttons though..