如何将复选框置于标签右侧？Angular水平复选框布局调整

要实现复选框在标签文本右侧的效果，只需调整<label>内部元素的顺序，同时保留原有的水平排列逻辑即可：

修改后的代码 #

CSS（无需改动） #

.add-margin {
  margin-top: 10px !important;
}

HTML（调整元素顺序） #

<div>
  <div ng-init="loaded()" ng-class="{'add-margin': descriptionsAvailable}" class="checkbox-inline" ng-repeat="opt in options track by $index">
    <label>
      <span>{{opt}}</span><br/>
      <span><i>{{descriptions[$index]}}</i></span>
      <!-- 将复选框移至标签内容后方 -->
      <input ng-disabled="answer['none']" type="checkbox" ng-model="answer[opt]" ng-true-value="true" ng-false-value="false" name="checkbox-answer-input" style="display: inline-block;">
    </label>
  </div>
</div>

关键修改说明 #

• 调整<label>内部元素顺序：把复选框<input>从标签开头移到文本内容之后，直接实现"文本在前、复选框在后"的布局
• 保留<label>包裹结构：确保点击文本依然能触发复选框的选中/取消操作，不破坏交互逻辑
• 修正语法错误：将原代码中不规范的display= inline-block改为标准的style="display: inline-block;"（如果checkbox-inline类已处理行内布局，该行可省略）

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