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 更简洁，我建议您将每个输入及其各自的标签放在一个 div 容器中。

下一步是在 .gender-buttons 类上应用样式，它是单选按钮的父级。

这里有两个选项，使用 display: inline-block，但我个人建议使用 display: flex，因为它会在安排单选按钮时提供更大的灵活性。您还可以添加 flex-wrap: wrap，这将使您的单选按钮随着浏览器的大小而变化，并且它们会根据需要自动跨行显示。

单选按钮并排

2 个答案: