如何在css中對齊按鈕無線電

Question

我想對齊我的頁面上的按鈕無線電，似乎其中一個按鈕（Gender）高度縮進。 M（性別）的收音機位於中央，另一個按鈕位於最右側。我一直在改變CSS的值，但它不對齊。我如何對齊它們？任何人幫助？我的CSS結合起來，我從這裏得到了大部分的幫助。

form { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
label, 
 
input { 
 
    display: inline-block; 
 
} 
 
label { 
 
    width: 30%; 
 
} 
 
label + input { 
 
    width: 30%; 
 
    margin: 0 10% 0 1%; 
 
} 
 
.label-align input[type="checkbox"] { 
 
    cursor: pointer; 
 
    margin-top: 6px; 
 
} 
 
.label-align span { 
 
    margin: 0 0 10px 10px; 
 
    display: block; 
 
} 
 
.left { 
 
    float: left; 
 
}

<div id="register" class="container"> 
 
    <form action="" method="post"> 
 
    <label>*First Name:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Last Name:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Birth Date:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Gender:</label> 
 
    <input type="radio" name="gender" value="male" checked>M 
 
    <input type="radio" name="gender" value="female" checked>F 
 
    <br> 
 
    <label>*Email:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Password:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Re-enter Password:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span> 
 
    </button> 
 
    </form> 
 
</div>

Answer 1

這是因爲以下風格發生。

label + input { 
    width: 30%; 
    margin: 0 10% 0 1%; 
} 

以下的標籤將獲得的30％的寬度的所有輸入。 只有第一個單選按鈕受此影響的原因是因爲它是與性別標籤相鄰的單選按鈕。

您可以更改此規則，以便僅影響輸入框。

label + input[type='text'] { 
    width: 30%; 
    margin: 0 10% 0 1%; 
} 

片段例如

form { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
label, 
 
input { 
 
    display: inline-block; 
 
} 
 
label { 
 
    width: 30%; 
 
} 
 
label + input[type='text'] { 
 
    width: 30%; 
 
    margin: 0 10% 0 1%; 
 
} 
 
.label-align input[type="checkbox"] { 
 
    cursor: pointer; 
 
    margin-top: 6px; 
 
} 
 
.label-align span { 
 
    margin: 0 0 10px 10px; 
 
    display: block; 
 
} 
 
.left { 
 
    float: left; 
 
}

<div id="register" class="container"> 
 
    <form action="" method="post"> 
 
    <label>*First Name:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Last Name:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Birth Date:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Gender:</label> 
 
    <input type="radio" name="gender" value="male" checked>M 
 
    <input type="radio" name="gender" value="female" checked>F 
 
    <br> 
 
    <label>*Email:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Password:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <label>*Re-enter Password:</label> 
 
    <input type="text"> 
 
    <br> 
 
    <button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span> 
 
    </button> 
 
    </form> 
 
</div>

Answer 2

label + input { 
    width: 30%; 
    margin: 0 10% 0 1%; 
} 

刪除寬度：30％;

Answer 3

在代碼中添加一個類這樣

 <input type="radio" name="gender" class="gender" value="male" checked>M 
     <input type="radio" name="gender" value="female" checked>F<br> 

在你的CSS樣式屬性

添加此類性別道具像這樣。

.gender{ 
    width: 0px !important; 
    margin: 0px 0px 0px 4px !important; 
    } 

Answer 4

請添加下面的CSS，

input[type="radio"] { 
    margin: 4px 4px 4px 4px; 
    width: 2%; 
}