如何让复选框标签位于复选框的左侧

Question

我有以下代码：

   <div class=checkbox>
       <label><input type="checkbox" id="foo">My Label</label>
   </div>

   <div class=checkbox>
       <label><input type="checkbox" id="bar">Another Longer</label>
   </div>

   <div class=checkbox>
       <label><input type="checkbox" id="baz">Less than lng</label>
   </div>

这将在 bootstrap 3 中呈现，标签位于右侧。这通常很好，但我需要它在右侧，复选框在左侧。

所以它看起来像下面，标签也应该右对齐。

      My Label []
Another longer []
 Less than lng []

Answer 1

label{float:left}

 <div class=checkbox>
       <input type="checkbox" id="foo"><label>My Label</label>
   </div>

   <div class=checkbox>
       <input type="checkbox" id="bar"><label>Another Longer</label>
   </div>

   <div class=checkbox>
       <input type="checkbox" id="baz"><label>Less than lng</label>
   </div>

为了完美对齐，即使很多设计师不喜欢，我也会这样做

<table><tr>
       <td><label>My Label</label></td>
         <td><input type="checkbox" id="foo"></td>
</tr><tr>
       <td><label>Another Longer</label></td>
         <td><input type="checkbox" id="bar"></td>
</tr><tr>
       <td><label>Less than lng</label></td>
         <td><input type="checkbox" id="baz"></td>
</tr></table>

Answer 2

只需尝试将 float 设置为 left，对于 .checkbox 中的 input。

为了平滑对齐，您将设置 .checkbox 和 label 的宽度。

要将标签文本右对齐您必须将 text-align 设置为 right。
附加您必须在标签文本和复选框 input.

之间设置 margin-left for input for space

JSFiddle

CSS:

.checkbox, .checkbox label {
    width: 200px;
}

.checkbox label {
    text-align: right;
    float: left;
}
.checkbox input {
    margin-left: 16px;
    float: right;
}

Answer 3

如果你可以把你的 checkbox div 放在一个容器里，你就不用担心设置宽度了：

.container {
  display: inline-block;
  white-space: nowrap;
}

.checkbox {
  border: 1px solid transparent;
  text-align: right;
}

.checkbox input {
  float: right;
}

IE和Chrome需要边框。（请注意，我已将其透明化。）无意中偶然发现了它，并会尝试弄清楚为什么需要它。

white-space: nowrap 仅适用于 IE。

Working Fiddle

更新

我们需要覆盖一些 Bootstrap 的默认设置。

container 是 Bootstrap class，所以我改成了 cbcontainer。

Bootstrap 使输入 position: absolute，所以我已更改为 position: relative !important。

此外，输入现在需要一个边距。

最后，IE和Chrome不再需要边框，IE不再需要white-space。

已更新CSS：

.cbcontainer {
  display: inline-block;
}

.checkbox {
  text-align: right;
}

.checkbox input {
  float: right;
  position: relative !important;
  margin: 5px !important;
}

New Fiddle

如何让复选框标签位于复选框的左侧

How to get checkbox label to be on the left of checkbox

html

checkbox

jquery

twitter-bootstrap

twitter-bootstrap-3