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

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>