html - 复选框元素搞砸了

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