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

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

如果您可以将checkbox div放在容器中，则不必担心设置宽度：

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

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

.checkbox input {
  float: right;
}

IE和Chrome需要边框。 （请注意，我让它变得透明。）偶然发现了它，并试图弄清楚它为什么需要它。

仅IE需要

white-space: nowrap。

Working Fiddle

<小时/> 的更新

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

container是一个Bootstrap类，因此我已更改为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

Answer 2

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 3

在float内left尝试设置input到.checkbox。

要获得平滑的对齐，您需要设置.checkbox和label的宽度。

要将标签文字对齐，请将text-align设置为right。
其他您必须为margin-left设置input标签文字与复选框input之间的空格。

<强> JSFiddle

<强> CSS：

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

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