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

【问题标题】：How to move inline radio inputs under label,如何在标签下移动内联无线电输入，
【发布时间】：2017-07-20 21:21:05
【问题描述】：

所以我是一个完整的初学者，我坚持一些个人项目。我正在制作表单，我想在同一行中输入来自单选按钮的输入，但在标签下。我知道如何使所有元素内联，并且我知道设置块属性应该将它们放在标签下。但是块元素将所有输入置于其线上。我想要的是所有输入都在同一行，在标签下。我可以在 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>

【问题讨论】：

标签： html css forms label

【解决方案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>

【讨论】：

【解决方案2】：

将标签设置为display: flex;，但请确保不要针对radio类，否则它也会影响父div而无法正常工作。

【讨论】：

Flexbox 在这里有点矫枉过正。只需将标签（并避免输入）设置为阻塞即可。

【解决方案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>

【讨论】：