並排的單選按鈕

Question

嗨，我制作了幾個單選按鈕，並希望它們並排。

 .gender-buttons{ margin-bottom: 6rem; }.gender-buttons input[type = "radio"]{ opacity: 0%; position: fixed; width: 0%; }.gender-buttons label{ display: inline-block; grid-template-columns: 1fr 1fr; padding: 20px; font-family: 'Nunito', sans-serif; font-size: 16px; border: 2px solid black; border-radius: 4px; }

 <div class="main-container"> <div class="viewport"> <div class="gender-buttons" id="gender-buttons"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> </div> </div> </div>

我希望男性和女性按鈕並排 [MALE] [FEMALE] 並在單擊時成為選擇（如您所見，我刪除了常規單選按鈕）但由於某種原因它們堆疊在彼此的頂部。 我試過像玩行和 flexbox 一樣亂搞，但似乎沒有什么能讓他們並排在一起。

Answer 1

你必須使用display: inline-block; 因此它們可以全部放在一條線上。
float: left; 也是一種可能。

Answer 2

首先，為了使 HTML 更干凈，我建議您將每個輸入及其各自的 label 放在一個 div 容器中。

下一步是在.gender-buttons class 上應用樣式，它是單選按鈕的父級。

這里有兩個選項，使用display: inline-block ，但我個人建議使用display: flex ，因為它在安排單選按鈕時會提供更多的靈活性。 您還可以添加flex-wrap: wrap ，這將使您的單選按鈕隨瀏覽器大小流動，並且它們將自動跨越所需的行數以顯示它們。