How to get checkbox-label auf der linken checkbox

Ich habe den folgenden code:

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

hierdurch werden in bootstrap 3 mit dem label auf der rechten Seite. und das ist gut normalerweise, aber ich muss es auf der rechten Seite mit der checkbox auf der linken Seite.

So sieht es aus wie unten, die Etiketten sollte Recht gerechtfertigt auch.

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

InformationsquelleAutor krystan honour | 2015-03-07

2

Wenn Sie können Ihre checkbox divs in einem container, Sie müssen nicht sorgen zu machen über die Einstellung Breite:
```
.container {
  display: inline-block;
  white-space: nowrap;
}

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

.checkbox input {
  float: right;
}
```
Die Grenze ist erforderlich für IE und Chrome. (Beachten Sie, dass ich es transparent). Gestolpert, die durch Unfall und wird versuchen, herauszufinden, warum es notwendig ist.

white-space: nowrap benötigt nur IE.

Arbeitet Fiddle

Update

Müssen wir überschreiben einige der Bootstrap-Standardwerte.

container ist eine Bootstrap Klasse, also ich habe gewechselt cbcontainer.

Bootstrap macht die Eingänge position: absolute, also ich habe gewechselt position: relative !important.

Zudem, die Marge ist nun erforderlich, für die Eingabe.

Schließlich, die Grenze ist nicht mehr erforderlich, für IE und Chrome, und white-space ist nicht mehr erforderlich für den IE.

Aktualisiert CSS:
```
.cbcontainer {
  display: inline-block;
}

.checkbox {
  text-align: right;
}

.checkbox input {
  float: right;
  position: relative !important;
  margin: 5px !important;
}
```
New Fiddle
- sorry, aber diese doesn ' T Arbeit für bootstrap: siehe meine fiddl jsfiddle.net/krystan/vaeg50hk/3
- Sorry, habe ich nicht testen für das Zitat. Ich aktualisiert meine Antwort.
- was für eine tolle Antwort.. danke so viel, ich kann nicht glauben um ehrlich zu sein ist dies nicht mehr gestellte Frage.
InformationsquelleAutor Rick Hitchcock
1

Nur versuchen festgelegt float zu left für input innen .checkbox.

Für die reibungslose Ausrichtung, legen Sie die Breite der .checkbox und label.

Ausrichten, text label, zu Recht, Sie müssen text-align zu right.

Zusätzlich müssen Sie margin-left für input für den Abstand zwischen label und text checkbox input.

JSFiddle

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

.checkbox label {
    text-align: right;
    float: left;
}
.checkbox input {
    margin-left: 16px;
    float: right;
}
```
- weil das Etikett wickelt sich der Eingang schwebt die gesamte Partie über auf der rechten Seite des aktuellen container-und hält die alte Ausrichtung.
InformationsquelleAutor Mateusz Mania

CSS:

label{float:left}

HTML:

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

für die perfekte Ausrichtung, auch wenn viele Designer es nicht mögen, würde ich dies tun

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

Ihre Etiketten und die Eingaben sind nicht richtig ausgerichtet.
einfach floating der labels Links funktioniert nicht

InformationsquelleAutor Nik Drosakis

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.