强制单选按钮及其标签位于同一行

Question

如果您有多个单选按钮，每个按钮都带有一个标签，那么强制按钮/标签对始终位于同一行的最简单方法是什么，并强制下一对下行到下一行？

大屏幕：

 () Label 1    () Label 2    () Label 3

在小屏幕上，我想要的是：

() Label 1
() Label 2
() Label 3

但我得到的是这样的：

() Label 1 ()
Label 2 ()
Label 3

Answer 1

看起来你需要进行一些HTML更改以及CSS更改，我猜。

示例：

label {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  label {
    display: block;
  }
}

<label for="radio_1">
  <input type="radio" name="radio" id="radio_1" />
  Label 1
</label>
<label for="radio_2">
  <input type="radio" name="radio" id="radio_2" />
  Label 2
</label>
<label for="radio_3">
  <input type="radio" name="radio" id="radio_3" />
  Label 3
</label>
<label for="radio_4">
  <input type="radio" name="radio" id="radio_4" />
  Label 4
</label>