Wie Sie Kontrollkästchen und ihre Beschriftungen konsistent über Browser hinweg ausrichten

Für das vertikale Ausrichten sind manchmal zwei Inline-Elemente (Span, Beschriftung, Eingabe usw.) nebeneinander erforderlich, damit sie ordnungsgemäß funktionieren. Die folgenden Kontrollkästchen sind in IE, Safari, FF und Chrome korrekt vertikal zentriert, auch wenn die Textgröße sehr klein oder groß ist.

Sie schweben alle in derselben Zeile nebeneinander, aber die Nowrap bedeutet, dass der gesamte Beschriftungstext immer neben dem Kontrollkästchen bleibt.

Der Nachteil sind die zusätzlichen bedeutungslosen SPAN-Tags. 

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Wenn Sie jetzt einen sehr langen Label-Text haben, der benötigt umwickelt werden soll, ohne unter das Kontrollkästchen zu springen, würden Sie die Label-Elemente mit Padding und negativen Texteinzug versehen:

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Aus der One Crayon's Lösung habe ich etwas, das für mich funktioniert und einfacher ist:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Bildet für Pixel dasselbe in Safari (dessen Basislinie ich vertraue), und Firefox und IE7 sind genauso gut. Es funktioniert auch für verschiedene Etikettengrößen (groß und klein). Nun, zum Festlegen der IE-Basislinie für Auswahl und Eingabe ...

Update: (Bearbeitung durch Dritte)

Die richtige bottom-Position hängt von der Schriftfamilie und der Schriftgröße ab! Die Verwendung von bottom: .08em; für Checkbox- und Radio-Elemente ist ein guter allgemeiner Wert. Ich habe es in Chrome/Firefox/IE11 unter Windows mit Arial & Calibri-Schriftarten getestet, wobei mehrere kleine/mittlere/große Schriftgrößen verwendet wurden.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Eine einfache Sache, die anscheinend gut funktioniert, besteht darin, die vertikale Position des Kontrollkästchens mit vertikaler Ausrichtung anzupassen. Es wird immer noch von Browser zu Browser unterschiedlich sein, aber die Lösung ist unkompliziert.

input {
    vertical-align: -2px;
}

Referenz

probiere vertical-align: middle

ihr Code scheint auch so zu sein:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

Probieren Sie meine Lösung aus, ich habe es in IE 6, FF2 und Chrome ausprobiert und es wird Pixel für Pixel in allen drei Browsern dargestellt.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

Die einzig perfekt funktionierende Lösung für mich ist:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Heute in Chrome, Firefox, Opera, IE 7 und 8 getestet. Beispiel: Fiddle

Normalerweise verwende ich die Zeilenhöhe, um die vertikale Position meines statischen Textes anzupassen:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Hoffentlich hilft das.

Ich habe meine Lösung nicht vollständig getestet, aber es scheint großartig zu funktionieren.

Mein HTML ist einfach:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

Dann setze ich alle Kontrollkästchen für Höhe und Breite auf 24px. Um den Text auszurichten, mache ich den line-height des Labels und 24px und weise vertical-align: top; so zu:

EDIT: Nach dem Testen von IE fügte ich der Eingabe vertical-align: bottom; hinzu und änderte die CSS des Labels. Möglicherweise benötigen Sie einen bedingten IE css-Fall, um die Auffüllung zu sortieren. Der Text und das Feld sind jedoch inline.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

Wenn jemand feststellt, dass dies nicht funktioniert, lassen Sie es mich bitte wissen. Hier ist es in Aktion (in Chrome und IE - Entschuldigung, da Screenshots auf der Netzhaut gemacht wurden und Parallelen für den IE verwendet wurden):

Ich denke, das ist der einfachste Weg

input {
    position: relative;
    top: 1px;
}

Fiddle

Das funktioniert gut für mich:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Nun, da Flexbox in allen modernen Browsern unterstützt wird, scheint mir dies etwas einfacher zu sein.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Hier ist die vollständige Demo-Version mit dem Präfix:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Ich mag die relative Positionierung nicht, weil das Element auf seiner Ebene über alles andere gerendert wird (wenn Sie ein komplexes Layout haben, kann es über etwas hinausgehen).

Ich habe festgestellt, dass vertical-align: sub die Kontrollkästchen in Chrome, Firefox und Opera gut genug ausschaut. Safari kann nicht überprüft werden, da ich kein MacOS habe und IE10 ein wenig aus ist, aber ich habe festgestellt, dass dies eine gute Lösung für mich ist.

Eine andere Lösung könnte darin bestehen, für jeden Browser ein spezifisches CSS zu erstellen und es mit einigen vertikalen Ausrichtungen in%/Pixel/EMs anzupassen: http://css-tricks.com/snippets/css/browser -spezifische Hacks/

Ich hatte noch nie ein Problem damit:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

Die gewählte Antwort mit mehr als 400 Upvotes funktionierte für mich in Chrome 28 OSX nicht, wahrscheinlich, weil sie nicht in OSX getestet wurde oder dass sie in 2008 funktioniert hat, als diese Frage beantwortet wurde.

Die Zeiten haben sich geändert, und neue CSS3-Lösungen sind jetzt machbar. Meine Lösung verwendet pseudoelements , um eine benutzerdefinierte Checkbox zu erstellen. Die Bestimmungen (Vor- oder Nachteile, wie auch immer Sie es betrachten) sind also wie folgt:

• Funktioniert nur in modernen Browsern (FF3.6 +, IE9 +, Chrome, Safari)
• Verlässt sich auf ein benutzerdefiniertes Kontrollkästchen, das in jedem Browser/Betriebssystem genau gleich dargestellt wird. Ich habe hier nur ein paar einfache Farben ausgewählt, aber Sie könnten immer lineare Farbverläufe hinzufügen und so, dass sie eher knallig wirken.
• Ist auf eine bestimmte Schriftart/Schriftgröße ausgerichtet, die bei einer Änderung geändert wird, ändern Sie einfach die Position und Größe des Kontrollkästchens, um es vertikal auszurichten. Bei korrekter Anpassung sollte das Endergebnis in allen Browser-/Betriebssystemen immer noch nahezu identisch sein.
• Keine vertikalen Ausrichtungseigenschaften, keine Schwebekörper
• Muss das bereitgestellte Markup in meinem Beispiel verwenden, es funktioniert nicht, wenn es wie die Frage strukturiert ist. Das Layout wird jedoch im Wesentlichen gleich aussehen. Wenn Sie Dinge verschieben möchten, müssen Sie auch das zugehörige CSS verschieben

Ihr HTML:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Dein CSS:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

Diese Lösung verbirgt das Kontrollkästchen und fügt dem Label Pseudoelemente hinzu und formatiert sie, um das sichtbare Kontrollkästchen zu erstellen. Da das Label an das ausgeblendete Kontrollkästchen gebunden ist, wird das Eingabefeld immer noch aktualisiert und der Wert wird mit dem Formular übermittelt.

jsFiddle: http://jsfiddle.net/SgXYY/6/

Und wenn Sie interessiert sind, hier meine Auswahl über Radioknöpfe: http://jsfiddle.net/DtKrV/2/

Hoffe, jemand findet das nützlich!

Ich wollte nur die Diskussion über das 'for'-Attribut auf Etiketten hinzufügen (etwas offtopic):

Bitte geben Sie es an, auch wenn es nicht notwendig ist, weil es sehr bequem ist, es von Javascript aus zu verwenden:

var label = ...
var input = document.getElementById(label.htmlFor);

Das ist viel bequemer als der Versuch herauszufinden, ob das Etikett verschachtelt ist oder ob die Eingabe vor dem Etikett oder nach dem Etikett liegt.

Nur meine 2 Cent.

Wenn Sie ASP.NET Web Forms verwenden, müssen Sie sich nicht um DIVs und andere Elemente oder feste Größen kümmern. Wir können den Text <asp:CheckBoxList> ausrichten, indem Sie float:left auf den Eingabetyp CheckboxList in CSS setzen.

Bitte überprüfen Sie den folgenden Beispielcode:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX-Code:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

Der Trick besteht darin, die vertikale Ausrichtung nur in Tabellenzellen oder Inline-Block zu verwenden, wenn das Label-Tag verwendet wird.

Schauen wir uns zum Schluss die Ursache des Problems an

Die Kontrollkästchen werden mithilfe von Bildern gerendert (man kann benutzerdefinierte über CSS festlegen). Hier ist ein (nicht angehaktes) Kontrollkästchen in FireFox, das im DOM-Inspektor hervorgehoben ist:

Und hier ist das gleiche nicht gestaltete Kontrollkästchen in Chrome:

Sie können den Rand sehen (orange); Polsterung ist nicht vorhanden (wird grün angezeigt). Also, was ist dieser Pseudo-Rand rechts und unten in der Checkbox? Dies sind Teile des Bildes, die für das Kontrollkästchen verwendet werden. Das ist der Grund, warum die Verwendung von vertical-align: middle nicht wirklich ausreicht und das ist die Ursache für die browserübergreifenden Probleme.

Was können wir dagegen tun?

Eine naheliegende Option ist - ersetzen Sie die Bilder! Glücklicherweise kann man dies über CSS tun und diese durch externe Bilder, base64-Bilder (in-CSS), in-CSS svg oder nur Pseudoelemente ersetzen. Es ist ein robuster (browserübergreifender!) Ansatz, und hier ist ein Beispiel für eine solche Anpassung, die diese Frage gestohlen wurde:

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Vielleicht möchten Sie einige ausführlichere Artikel über ein solches Styling lesen, wie zum Beispiel die folgenden hier ; Es liegt außerhalb des Rahmens dieser Antwort.

Ok, was ist noch mit No-Custom-Images-or-Pseudo-Elements-Lösung?

TL; DR: sieht so aus, als würde das nicht funktionieren, benutze stattdessen ein benutzerdefiniertes Kontrollkästchen

Beachten Sie zunächst, dass es in anderen Browsern keine konsistente Lösung gab, wenn diese Pseudoränder innerhalb des Kontrollkästchens beliebig waren. Um eines zu erstellen, müssen wir die Anatomie solcher Bilder in vorhandenen Browsern untersuchen.

Also, welche Browser haben die Pseudoränder in Checkboxen? Ich habe Chrome 75, Vivaldi 2.5 (auf Chrom basierend), FireFox 54 (fragen Sie nicht, warum dies veraltet ist), IE 11, Edge 42, Safari ?? (eine für eine Minute ausgeliehen, vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi haben solche Pseudoränder (ich vermute, dass auch alle Chromium-basierten Browser wie Opera).

Wie groß sind diese Pseudoränder? Um dies herauszufinden, kann man ein gezoomtes Kontrollkästchen verwenden:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

mein Ergebnis ist ~ 7% der Breite/Höhe und somit 0,9-1,0px in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: Probieren Sie verschiedene Werte von zoom für das Kontrollkästchen aus. In meinen Tests in Chrome und Vivaldi ist die relative Größe des Pseudorandes bei zoom Werten 10, 20 und bei Werten 11-19 (??) sehr unterschiedlich:

scale scheint konsistenter zu sein:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

also sind wahrscheinlich ~ 14% und 2px die richtigen Werte.

Nun, da wir die Größe des Pseudorandes kennen (?), Stellen wir fest, dass dies nicht ausreicht. Sind die Größen der Kontrollkästchensymbole für alle Browser gleich? Ach! Folgendes wird im DOM-Inspektor für nicht gestaltete Kontrollkästchen angezeigt:

• Firefox: 13.3px
• Chrom-basiert: 12,8px für das Ganze, daher 12,8 (100% - 14%) = 11px für das, was visuell als Kontrollkästchen wahrgenommen wird
• IE 11, Edge: 13px
• Safari: n/a (diese sollten, glaube ich, auf demselben Bildschirm verglichen werden)

Bevor wir nun Lösungen oder Tricks diskutieren, fragen wir: Was ist eine korrekte Ausrichtung? Was versuchen wir zu erreichen? Bis zu einem gewissen Punkt ist es Geschmackssache, aber im Grunde kann ich mir die folgenden Aspekte von "Nizza" -Ausrichtungen vorstellen:

text und Kontrollkästchen auf derselben Grundlinie (ich passe die Größe der Kontrollkästchen hier absichtlich nicht an):

oder haben die gleiche Mittellinie in Kleinbuchstaben:

oder die gleiche Mittellinie in Großbuchstaben (es ist einfacher, den Unterschied für verschiedene Schriftgrößen zu erkennen):

außerdem müssen wir entscheiden, ob die Größe des Kontrollkästchens der Höhe eines Kleinbuchstabens, eines Großbuchstabens oder etwas anderem (größer, kleiner oder zwischen Kleinbuchstaben und Großbuchstaben) entsprechen soll.

Nennen wir für diese Diskussion ein Alignment Nice, wenn sich das Kontrollkästchen auf derselben Grundlinie wie der Text befindet und die Größe eines Großbuchstabens hat (eine sehr umstrittene Wahl):

Nun, welche Werkzeuge müssen wir haben:

1. größe des Kontrollkästchens anpassen
2. erkennen Sie Chromium anhand seines pseudorandigen Kontrollkästchens und legen Sie bestimmte Stile fest
3. passen Sie die vertikale Ausrichtung des Kontrollkästchens/Etiketts an

?

1. In Bezug auf Anpassung der Kontrollkästchengröße : Es gibt width, height, size, zoom, scale (habe ich etwas verpasst?). zoom und scale können keine absolute Größe festlegen, daher können sie nur beim Anpassen der Textgröße hilfreich sein, nicht beim Festlegen der browserübergreifenden Größe (es sei denn, wir können browserspezifische Regeln schreiben). size funktioniert nicht mit Chrome (hat es mit dem alten IE funktioniert? Auf jeden Fall ist es nicht so interessant). width und height funktionieren in Chrome und anderen Browsern, sodass wir eine gemeinsame Größe festlegen können. In Chrome wird jedoch die Größe des gesamten Bildes und nicht das Kontrollkästchen selbst festgelegt. Hinweis: Das Minimum (Breite, Höhe) definiert die Größe eines Kontrollkästchens (wenn Breite ≠ Höhe, wird der Bereich außerhalb des Kontrollkästchens zum "Pseudorand" hinzugefügt).

   Leider sind die Pseudoränder in der Checkbox Chrome meines Erachtens für keine Breite und Höhe auf Null gesetzt.

2. Ich fürchte, es gibt heutzutage keine verlässliche Nur-CSS-Methode .

3. Betrachten wir die vertikale Ausrichtung. vertical-align kann keine konsistenten Ergebnisse liefern, wenn middle oder baseline eingestellt ist. Aufgrund des Pseudorandes von Chrome ist es die einzige echte Option, dass alle Browser dasselbe "Koordinatensystem" erhalten, Beschriftung und Eingabe an top auszurichten. :

   (auf dem Bild: vertikal ausrichten: oben, unten und unten ohne Kastenschatten)

Welches Ergebnis erhalten wir also daraus?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

Das obige Snippet funktioniert mit Chrome (Chromium-basierte Browser), andere Browser erfordern jedoch eine kleinere Größe des Kontrollkästchens. Es scheint unmöglich zu sein, sowohl die Größe als auch die vertikale Ausrichtung auf eine Weise anzupassen, die die Bildtrubel der Chromium-Checkbox umgeht. Mein letzter Vorschlag ist: Verwenden Sie stattdessen benutzerdefinierte Kontrollkästchen - und Sie vermeiden Frust:)

Die Höhe und Breite des Kontrollkästchens hartcodieren, die Auffüllung entfernen und Höhe und vertikale Ränder der Zeilenhöhe des Etiketts anpassen. Wenn der Beschriftungstext Inline ist, setzen Sie das Kontrollkästchen. In Firefox, Chrome und IE7 + wird das folgende Beispiel identisch dargestellt: http://www.kornea.com/css-checkbox-align

Wenn Sie Twitter Bootstrap verwenden, können Sie einfach die checkbox-Klasse für den <label> verwenden:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Mit einem Kontrollkästchen für den Eingabetyp, der in das Etikett eingewickelt und wie folgt nach links verschoben wurde:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

das hat für mich funktioniert:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Stellen Sie sicher, dass die Höhe von der der Zeilenhöhe von (Blockebene) entspricht.

Verwenden Sie einfach vertical-align: sub, da pokrishka bereits vorgeschlagen wurde.

Fiddle

HTML Quelltext:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS-Code:

.checkboxes input {
    vertical-align: sub;
}

Normalerweise lasse ich ein Kontrollkästchen unbeschriftet und mache dann das "Label" zu einem separaten Element. Es ist ein Schmerz, aber es gibt so viele Cross-Browser-Unterschiede zwischen der Anzeige der Kontrollkästchen und ihrer Beschriftungen (wie Sie bemerkt haben), dass ich auf diese Weise nur so steuern kann, wie alles aussieht.

Aus dem gleichen Grund mache ich das auch in der Winforms-Entwicklung. Ich denke, das grundlegende Problem bei der Checkbox ist, dass es sich wirklich um zwei verschiedene Steuerelemente handelt: die Box und das Label. Wenn Sie ein Kontrollkästchen verwenden, überlassen Sie es den Umsetzern des Steuerelements, zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie bekommen es immer falsch, wobei falsch = nicht das, was Sie wollen).

Ich hoffe wirklich, dass jemand eine bessere Antwort auf Ihre Frage hat.

Ich weiß, dass dies viele Male beantwortet wurde, aber ich habe das Gefühl, dass ich eine elegantere Lösung habe als die, die bereits bereitgestellt wurde. Und nicht nur eine elegante Lösung, sondern zwei separate Lösungen, die Ihre Fantasie anregen. Alles in allem, was Sie wissen und sehen müssen, ist in 2 JS Fiddle enthalten, mit Kommentaren.

Lösung Nr. 1 basiert auf der nativen "Checkbox" des angegebenen Browsers, allerdings mit einer gewissen Wendung ... Die Datei ist in einem Div enthalten, das einfacher über einen Browser zu positionieren ist, mit einem Überlauf: versteckt, um das überstehende 1px-Kontrollkästchen zu hacken (Dies ist so, Sie können die hässlichen Grenzen von FF nicht sehen)

Simple HTML: (folgen Sie dem Link, um die CSS mit Kommentaren zu überprüfen, der Codeblock soll Stackoverflow erfüllen)http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

Lösung Nr. 2 verwendet "Checkbox Toggle Hack", um den CSS-Status eines DIV umzuschalten, das ordnungsgemäß im Browser positioniert wurde, und das Setup mit einem einfachen Sprite für das Kontrollkästchen "Kontrollkästchen deaktiviert" und "Kontrollkästchen" zu aktivieren. Sie müssen lediglich die Hintergrundposition mit Checkbox Toggle Hack anpassen. Dies ist meiner Meinung nach die elegantere Lösung, da Sie mehr Kontrolle über Ihre Kontrollkästchen und Funkgeräte haben und sicherstellen können, dass sie in allen Browsern gleich aussehen.

Simple HTML: (Folgen Sie dem Link, um das CSS mit Kommentaren zu überprüfen. Der Codeblock soll StackOverflow erfüllen.)http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

Wenn jemand mit diesen Methoden nicht einverstanden ist, hinterlassen Sie mir bitte einen Kommentar. Ich würde gerne ein Feedback hören, warum andere nicht auf diese Lösungen gestoßen sind. Wenn ja, warum sehe ich hier keine Antworten? Wenn jemand sieht, dass eine dieser Methoden fehlschlägt, wäre es schön, das auch zu sehen. Diese wurden jedoch in den neuesten Browsern getestet und basieren auf HTML/CSS-Methoden, die recht alt sind und soweit ich gesehen habe.

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

Der obige Code fügt Ihre Listenelemente in drei Spalten ein und ändert nur die Breite entsprechend.

Folgendes gibt pixelgenaue Konsistenz für alle Browser, auch für IE9:

Die Annäherung ist ziemlich vernünftig, bis sie offensichtlich ist:

1. Erstellen Sie eine Eingabe und ein Label.
2. Zeigen Sie sie als Block an, damit Sie sie wie gewünscht schweben können.
3. Stellen Sie die Höhe und die Höhe der Linie auf denselben Wert ein, um sicherzustellen, dass sie zentriert und vertikal ausgerichtet sind.
4. Beiem-Messungen muss der Browser zur Berechnung der Höhe der Elemente die Höhe der Schriftart für diese Elemente kennen und darf nicht selbst in Em-Messungen festgelegt werden.

Daraus ergibt sich eine global geltende allgemeine Regel:

input, label {display:block;float:left;height:1em;line-height:1em;}

Mit anpassbarer Schriftgröße pro Formular, Feldset oder Element.

#myform input, #myform label {font-size:20px;}

In den neuesten Versionen von Chrome, Safari und Firefox unter Mac, Windows, Iphone und Android getestet. Und IE9.

Diese Methode ist wahrscheinlich auf alle Eingabetypen anwendbar, die nicht über einer Textzeile liegen. Wenden Sie eine passende Typregel an.

Vielen Dank! Auch das hat mich für immer verrückt gemacht. 

In meinem speziellen Fall hat das für mich funktioniert:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

Ich verwende die reset.css, die einige der Unterschiede erklären könnte, aber das scheint mir gut zu gehen.

position: relative; hat einige Probleme in IE mit z-index und Animationen wie SlideUp/SlideDown von jQuery.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Das Styling muss abhängig von der in <label> verwendeten Schriftgröße möglicherweise angepasst werden.

PS:
Ich benutze ie7js , um die CSS in IE6 zum Laufen zu bringen. 

<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

Sie sollten Formularsteuerelemente in ihren eigenen Feldern sowieso zusammenfassen, hier wird Wrappa gespielt. Eingabe/Beschriftung einstellen: Block, Eingabeflotte links, Beschriftungsfläche rechts, Breite einstellen, Abstand mit linkem/rechtem Rand steuern, Beschriftungstext entsprechend ausrichten. 

so

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

sie müssen wahrscheinlich sowohl für Cross-Browser- als auch für Media-Lösungen Rahmen, Umrisse und Strichhöhe für beide festlegen. 

Vielleicht machen manche Leute den gleichen Fehler wie ich? Was war ... Ich hatte eine Breite für die Eingabefelder festgelegt, weil sie größtenteils vom Typ 'Text' waren, aber dann vergessen, diese Breite für Kontrollkästchen zu überschreiben - also versuchte mein Kontrollkästchen, viel Breite und Breite zu beanspruchen Daher war es schwierig, ein Etikett daneben auszurichten.

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}

<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

Verfügt über anklickbare Beschriftungen und eine korrekte Ausrichtung bereits im IE6 (unter Verwendung eines Klassenselektors) und in späteren Versionen von Firefox, Safari und Chrome

Dies ist nicht der beste Weg, um das Problem zu lösen

vertical-align: middle

Durch Hinzufügen von style="position:relative;top:2px;" zum Eingabefeld würde es 2px nach unten verschoben. Abhängig von Ihrer Schriftgröße können Sie sie verschieben.

Einfache Lösung:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Getestet in Chrome, Firefox, IE9 +, Safari, iOS 9+

Ich fand die einzige Möglichkeit, sie in einer Reihe aufzustellen, die absolute Position für die Eingabe zu verwenden. Mit der Top-Variable der Eingabe herumzuspielen, hatte das gewünschte Ergebnis.

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}