如何将文本移动到HTML复选框（Pixeladmin切换开关）的左侧

方案1：直接调整HTML元素顺序（最简单，无需额外配置） #

你只需要把label标签内的文本Text to Screech移动到input和switcher-indicator元素之前，再给开关加个小的左边距避免和文本挨得太近即可，修改后的代码如下：

<form>
  <div class="form-group p-a-2" style="width: 300px;">
    <label for="ail_tts" class="switcher switcher-success ailtts" style="display:block; color:black; text-align:left">
    Text to Screech
    <input type="checkbox" id="ail_tts" checked="checked" style="text-align:right;margin-left:8px;">
    <div class="switcher-indicator">
       <div class="switcher-yes">ON</div>
       <div class="switcher-no">OFF</div>
    </div>
  </label>
  </div>
</form>

方案2：用CSS调整元素顺序（无需修改原有HTML结构） #

如果不方便改动现有HTML代码，给label加flex布局调整元素排序即可，新增以下样式就会生效：

.switcher.ailtts {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
/* 可根据需求调整文本和开关的间距 */
.switcher.ailtts .switcher-indicator {
  margin-left: 12px;
}

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