如何獲取復選框標簽在復選框的左側

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需要邊框。 （請注意，我使它透明。）偶然發現了該錯誤，將嘗試找出為什么需要它。

white-space: nowrap僅適用於IE。

工作小提琴

---

更新

我們需要覆蓋一些Bootstrap的默認值。

container是Bootstrap類，因此我已更改為cbcontainer 。

Bootstrap將輸入position: absolute ，因此我將position: relative !important更改為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; } 

新提琴

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進行input 。

為了平滑對齊，您將設置.checkbox寬度和label 。

要將標簽的text-align right text-align ，必須將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;
}