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

Question

如果你有多个单选按钮，每个都有一个标签，最简单的方法是强制按钮/标签对始终在同一行上，并将下一个对强制移到下一行。

大屏幕：

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

在小屏幕上，我想要的是这样的效果：

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

但我所理解的是这样的：

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

- Casey Crookston

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>

- Josh Burgess

---

太棒了！我会尽快将其标记为答案。谢谢！ - Casey Crookston

不幸的是，在我的设置中，这并没有起作用。我不得不使用<table>，<tr>，<td>将它们放在同一行。 - Nguai al