框元素搞砸

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