如何将单选按钮移动到框的右侧

Question

我目前使用的是 css 并使用最新的 css 版本

我尝试过垂直右对齐并操纵其他解决方案，例如边距和此平台上发布的其他潜在解决方案。但没有任何效果。 我是前端 Web 开发的新手。

Answer 1

我会使用网格。

.f2 {
  margin-top: 2em;
}
.f2 > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1em;
}
.f2 label {
  display: block;
}

<fieldset class="f1">
  <legend>Select a fruit:</legend>

  <label>Apple
    <input type="radio" id="apple" name="fruit" value="apple" checked />
  </label>

  <label>Banana
    <input type="radio" id="banana" name="fruit" value="banana" />
  </label>

  <label>Peach
    <input type="radio" id="peach" name="fruit" value="peach" />
  </label>
</fieldset>

<fieldset class="f2">
  <legend>Select a fruit:</legend>

  <div>
    <label for="apple">Apple</label>
    <input type="radio" id="apple" name="fruit" value="apple" checked />

    <label for="banana">Banana</label>
    <input type="radio" id="banana" name="fruit" value="banana" />

    <label for="peach">Peach</label>
    <input type="radio" id="peach" name="fruit" value="peach" />
  </div>
</fieldset>