如何使我所有的收音机/复选框排队?

Question

我想像在 #gender 中那样使 #frequent 中的所有收音机和 #player 中的复选框成一条直线，但不需要为每个标签和输入一个单独的div。我该怎么做？

我的代码笔和我代码的一部分：

在 #gender：

<div id="gender">
<div class="gm">
<label for="male"> Male  </label>
<input type="radio" id="male" name="gender" class="rad" >
</div>
<div class="gf">
<label for="female"> Female </label>
<input type="radio" id="female" name="gender" class="rad" >
</div>

例如，

<div id="frequent">
<legend> How Frequent Do You Listen To Music </legend>
<label for="aday">All day 
<input type="radio" id="aday" name="frequent" class="rad">
</label>
<label for="eday">Every day
<input type="radio" id="eday" name="frequent" class="rad">
</label>
<label for="oday">Every other day
<input type="radio" id="oday" name="frequent" class="rad">
</label>
<label for="party">I'm a party person
<input type="radio" id="party" name="frequent" class="rad">
</label>
</div>

Answer 1

你必须给出以下样式，然后它将与性别完全一样

#frequent label {
width: 50%;
display: flex;
justify-content: space-between;
}
#player label {
display: flex;
justify-content: space-between;
width: 50%;
}
#player input[type="checkbox"] {
margin-right: 0;
}
#player input {
flex: none;
}

您还可以检查代码笔

Answer 2

将标签中的文本换行在一个范围中，然后使用以下 css

.HTML

<label for="saxophone">  <span>Saxophone </span>
<input type="checkbox" id="saxophone" class="chk">
</label>

.CSS

label > span {
min-width: 150px;
display: inline-block;
}