當輸入已定義時，CSS輸入複選框

Question

我很難在表單中正確對齊我的複選框。 我創建了一個jsfiddle HERE css之前定義了一個輸入，但我在css代碼底部附近定義了一個特定的複選框輸入。出於某種原因，它不起作用。

主css：

/*inputs*/ 
#msform input, #msform textarea { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 

新增複選框標籤和輸入（不正常）

label { 
    float: left; 
    display: block; 
    padding-left: 15px; 
} 
input[type=checkbox] { 
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: middle; 
    position: relative; 
    top: 26px; 
    right: 60px; 
    *overflow: hidden; 
} 

Answer 1

您需要從ID #msform應用該樣式完全覆蓋前面的聲明。

#msform input[type=checkbox] { 
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: middle; 
    position: relative; 
    top: 26px; 
    right: 60px; 
    overflow: hidden; 
} 

現在就試試吧。

Answer 2

在標籤添加寬度100％對準他們

label { 
float: left; 
display: block; 
padding-left: 15px; 
width:100%; 
}