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

【问题标题】：How to get checkbox label to be on the left of checkbox如何让复选框标签位于复选框的左侧
【发布时间】：2015-03-08 02:15:28
【问题描述】：

我有以下代码：

   <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>

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

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

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

【问题讨论】：

标签： jquery html twitter-bootstrap checkbox twitter-bootstrap-3

【解决方案1】：

如果您可以将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 类，所以我改成了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

【讨论】：

对不起，但这不适用于引导程序：请参阅我的 fiddl jsfiddle.net/krystan/vaeg50hk/3
对不起，我最初没有对此进行测试。我已经更新了我的答案。
多么好的答案.. 非常感谢，老实说我不敢相信这不是一个更多的问题。

【解决方案2】：

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

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

要将标签的文本向右对齐，您必须将text-align 设置为right。
附加标签文本和复选框input之间的空格必须为input设置margin-left。

JSFiddle

CSS：

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

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

【讨论】：

因为标签包裹了输入，这会将整个批次浮动到当前容器的右侧并保持旧的对齐方式。

【解决方案3】：

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>

【讨论】：