如何将文本移动到 html 复选框的左侧？

Question

如何让我的文本移动到 HTML 复选框的左侧？复选框呈现为来自 Pixeladmin 代码的 switcher/toggle（参见图片），并放置在单击下拉列表显示的 Bootstrap 表单上，因此这里有一些额外的事情，但是我只是需要切换器文本向左移动。

这是代码和外观。提前致谢。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/pixeladmin.min.js"></script>

<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">
    <input type="checkbox" id="ail_tts" checked="checked" style="text-align:right;">
    <div class="switcher-indicator">
       <div class="switcher-yes">ON</div>
       <div class="switcher-no">OFF</div>
    </div>
    Text to Screech
  </label>
  </div>
</form>

Answer 1

试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<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;">
      <div class="switcher-indicator">
         <div class="switcher-yes">ON</div>
         <div class="switcher-no">OFF</div>
      </div>
    </label>
  </div>
</form>

Answer 2

将该复选框和文本置于自定义 div 中，然后将其设置为 div 的相对位置，然后将文本设置为 div 位置：绝对，然后将其设置为 left:0px会将文本向左移动，您可以使用复选框 div 做同样的事情并给出 right:0px。它将解决您的问题。

如何将文本移动到 html 复选框的左侧？

How to move text to the left side of html checkbox?

html

css

twitter-bootstrap-3