复选框元素搞砸了

Question

我试图在这里创建一个普通表单：http://americanbitcoinacademy.com/test/student-registration.html

然而，当我放置ff代码时：

<div class="form-input-group">
  <label>Subjects:</label>
  <input type="checkbox" value="">Math
  <input type="checkbox" value="">Science
  <input type="checkbox" value="">English
</div>

我的代码搞砸了：

使用CSS和HTML如何修复它以便它可以匹配其他表单字段？如何使这些复选框显示正常大小，右边是标签而不是弄乱其他字段？

您可以使用Chrome的检查工具检查我的代码。

Answer 1

问题在于下面的CSS。

.sign-up .signup-form .form-input-group input {
    padding-left: 68px;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: none;
}

您告诉复选框可以扩展容器的整个宽度和高度。您可以通过将此添加到您的css来解决此问题：

.sign-up .signup-form .form-input-group input[type="checkbox"] {
    width: auto;
    height: auto;
}