Question

所以我是一个完全的初学者，我坚持一些个人项目。我正在制作表格，我希望从单选按钮输入所有在同一行，但在标签下。我知道如何使所有元素内联，我知道设置块属性应该将它们置于标签下。但是块元素将所有输入放在其上。我想要的是所有输入都在同一条线上，在标签下。我可以在HTML中使用
标签，但我想用CSS制作它。有什么提示吗？

                <div class="radio" >
                 <label class="radio" for="age">Your age:</label>
                 <input type="radio" name="age">0-20
                 <input type="radio" name="age">20-40
                 <input type="radio" name="age">40-60
                 <input type="radio" name="age">60-80
                 <input type="radio" name="age">80-100
                </div>

                <div class="radio" >
                 <label class="radio" for="gender">Your gender</label>
                 <input type="radio" name="gender">Male
                 <input type="radio" name="gender">Female
                </div>

Answer 1

只需换行<br />

<div class="radio" >
      <label class="radio" for="age">Your age:</label>
       <br />
       <input type="radio" name="age">0-20
       <input type="radio" name="age">20-40
       <input type="radio" name="age">40-60
       <input type="radio" name="age">60-80
       <input type="radio" name="age">80-100
       </div>

       <div class="radio" >
       <label class="radio" for="gender">Your gender</label>
       <br />
       <input type="radio" name="gender">Male
       <input type="radio" name="gender">Female
     </div>

Answer 2

将标签设置为display: flex;，但请确保不要定位广播类，否则它也会影响父div并且无法正常工作。

Answer 3

不是将所有单选按钮设置为display: block，只需将标签设置为display: block即可获得所需的效果。块元素将开始一个新行（如果需要）并强制下一个元素到新行。由于您只希望标签本身位于新行上，因此将其设置为display: block即可。

label.radio {
    display: block;
}

<div class="radio">
    <label class="radio" for="age">Your age:</label>
    <input type="radio" name="age">0-20
    <input type="radio" name="age">20-40
    <input type="radio" name="age">40-60
    <input type="radio" name="age">60-80
    <input type="radio" name="age">80-100
</div>

<div class="radio">
    <label class="radio" for="gender">Your gender</label>
    <input type="radio" name="gender">Male
    <input type="radio" name="gender">Female
</div>

如何在标签下移动内联无线电输入，

3 个答案: