如何在不调换input与label顺序的情况下将单选框置于标签右侧？

要实现单选框在文本标签右侧，同时保留input在前、label在后的HTML结构（避免动态ID导致的单选框失效问题），可以通过以下CSS方案解决：

方案一：Flexbox布局（推荐） #

利用Flexbox的order属性调整元素显示顺序，不改动HTML结构：

CSS代码 #

.options {
  display: flex;
  align-items: center; /* 让单选框与标签垂直居中对齐 */
}
.options label.option-value {
  order: -1; /* 将标签调整到单选框之前显示 */
  margin-right: 8px; /* 可选，调整标签与单选框的间距 */
}

保留原有Rails代码 #

<div class="options">
  <input type="radio" id="<%=qid%>op1" name="<%=qid%>" value="<%= @questions[qid]["option1"] %>">
  <label class="option-value" for="<%=qid%>op1">A. <%= @questions[qid]["option1"] %></label>
</div>

原理：order属性仅改变元素的视觉排列顺序，不会修改HTML结构，完美适配你不能调换标签顺序的需求。之前使用float:right无效，是因为float仅改变元素的浮动方向，无法调整元素的排列优先级，原HTML中input在前的结构会导致它始终占据左侧位置。

方案二：浮动布局（备选） #

若不使用Flexbox，可通过浮动实现，但需注意清除浮动：

CSS代码 #

.options {
  overflow: hidden; /* 清除内部浮动，避免容器高度塌陷 */
}
.options label.option-value {
  float: left;
  margin-right: 8px;
}
.options input[type="radio"] {
  float: left;
}

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