如何向下移动单选按钮？ [复制]答案

【问题标题】：How do I move the radio buttons down? [duplicate]如何向下移动单选按钮？ [复制]
【发布时间】：2021-12-28 22:18:02
【问题描述】：

我的问题如下：如何（在 HTML、CSS 或两者中）将单选按钮向下移动？我想要它，以便第一个单选按钮与问题一致，并且以下单选按钮位于第一个单选按钮下方，即按 1、2、3 的顺序列出。

我的 HTML 是：

<div class="question">
    <label>At what time of day did it happen?</label>
</div>
<div class="answer">
    <input type="radio" id="morning"><label for="morning"> Morning</label><br>
    <input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
    <input type="radio" id="evening"><label for="evening"> Evening</label>
</div>

我的 CSS 是：

.question {
    border: 1px solid black;
    display: inline-block;
    width: 45%;
    text-align: right;
}

.answer {
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    width: 45%;
}

【问题讨论】：

标签： html css radio-button

【解决方案1】：

在这种情况下，您可以使用额外的 div wrapper 类容器和 flexbox 属性 align-items:flex-start、justify-content: center 和像 gap 属性这样的一点空白。

.wrapper{
  display: flex;
  align-items:flex-start;
  justify-content: center;
  gap: 1rem;
}

.question {
    border: 1px solid black;
    display: inline-block;
    width: 45%;
    text-align: right;
}

.answer {
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    width: 45%;
}

<div class="wrapper">
  <div class="question">
    <label>At what time of day did it happen?</label>
</div>
<div class="answer">
    <input type="radio" id="morning"><label for="morning"> Morning</label><br>
    <input type="radio" id="afternoon"><label for="afternoon"> Afternoon</label><br>
    <input type="radio" id="evening"><label for="evening"> Evening</label>
</div>
</div>

【讨论】：

【解决方案2】：

我想通了。我只需要将vertical-align: top; 添加到.answer 的CSS

【讨论】：