如何调整单选按钮位置实现首项与问题对齐后续垂直排列

实现方案 #

你仅需对现有CSS做极小修改即可达到预期效果，核心是修正inline-block元素的默认对齐逻辑：
inline-block元素默认按文本基线对齐，会导致两个并排的容器出现内容错位，给两个容器统一添加vertical-align: top属性，强制它们从顶部对齐，此时answer容器内的第一个单选按钮就会和question容器内的问题文本处于同一行。你现有代码里的<br>已经可以实现后续单选按钮垂直向下排列的效果。

修改后的CSS代码：

.question {
    border: 1px solid black;
    display: inline-block;
    width: 45%;
    text-align: right;
    vertical-align: top; /* 新增属性 */
}

.answer {
    border: 1px solid black;
    display: inline-block;
    text-align: left;
    width: 45%;
    vertical-align: top; /* 新增属性 */
}

更易维护的HTML优化方案（可选）：

如果不想用<br>控制换行，可以把每个单选选项包裹在块级div中，后续调整选项间距、样式也更方便：

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

div默认是块级元素，会自动换行，无需额外添加换行标签。

内容的提问来源于stack exchange，提问作者hsivru