框元素搞砸

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