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

Question

如果你有多个单选按钮，每个都有一个标签，强制 button/label 对总是在同一行，并强制下一对到下一行的最简单方法是什么？

大屏幕：

 () 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>

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

Force radio button and its label to be on same line

html

css

radio-button