如何在CSS中對齊按鈕收音機

Question

我試圖將頁面上的單選按鈕對齊，似乎其中一個按鈕（性別）高度縮進。 M（性別）的收音機位於中央，另一個按鈕位於最右側。 我一直在更改css中的值，但它不對齊。 如何對齊它們？ 有人幫忙嗎？ 我的css合並在一起，因此我從SO那里獲得了大多數幫助。

 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

請添加以下CSS，

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

Answer 4

在您的代碼中添加一個這樣的類

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