Dies ist eines der kleineren CSS-Probleme, die mich ständig plagen. Wie richten sich die Leute rund um den Stapelüberlauf vertikal aus checkboxesund wie labelskonsistent ist der Browser ? Immer wenn ich sie in Safari richtig ausrichte (normalerweise vertical-align: baselineauf dem input), sind sie in Firefox und IE vollständig deaktiviert. Beheben Sie das Problem in Firefox, und Safari und IE sind unweigerlich durcheinander. Ich verschwende jedes Mal Zeit damit, wenn ich ein Formular codiere.

Hier ist der Standardcode, mit dem ich arbeite:

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

Normalerweise verwende ich Eric Meyers Reset, sodass Formularelemente relativ frei von Überschreibungen sind. Ich freue mich auf alle Tipps oder Tricks, die Sie zu bieten haben!

Nach über einer Stunde Optimieren, Testen und Ausprobieren verschiedener Markup-Stile denke ich, dass ich möglicherweise eine anständige Lösung habe. Die Anforderungen für dieses spezielle Projekt waren:

1. Die Eingaben müssen in einer eigenen Zeile erfolgen.
2. Checkbox-Eingaben müssen in allen Browsern ähnlich (wenn nicht identisch) vertikal am Beschriftungstext ausgerichtet sein.
3. Wenn der Beschriftungstext umbrochen wird, muss er eingerückt werden (also kein Umbruch unter das Kontrollkästchen).

Bevor ich auf eine Erklärung eingehe, gebe ich Ihnen nur den Code:

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

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

Hier ist das Arbeitsbeispiel in JSFiddle .

In diesem Code wird davon ausgegangen, dass Sie einen Reset wie den von Eric Meyer verwenden, der die Eingaberänder und das Auffüllen von Formularen nicht überschreibt (daher werden das Zurücksetzen von Rändern und Auffüllungen in das Eingabe-CSS eingefügt). Natürlich werden Sie in einer Live-Umgebung wahrscheinlich Dinge verschachteln / überschreiben, um andere Eingabeelemente zu unterstützen, aber ich wollte die Dinge einfach halten.

Dinge zu beachten:

• Die *overflowDeklaration ist ein Inline-IE-Hack (der Star-Property-Hack). Sowohl IE 6 als auch IE werden es bemerken, aber Safari und Firefox werden es ordnungsgemäß ignorieren. Ich denke, es könnte gültiges CSS sein, aber mit bedingten Kommentaren sind Sie immer noch besser dran. Ich habe es nur der Einfachheit halber benutzt.
• Wie man am besten kann ich nur sagen, vertical-alignAussage , die in allen Browsern konsistent war war vertical-align: bottom. Wenn Sie dies einstellen und dann relativ nach oben positionieren, verhält es sich in Safari, Firefox und IE fast identisch mit nur ein oder zwei Pixeln Diskrepanz.
• Das Hauptproblem bei der Arbeit mit der Ausrichtung besteht darin, dass der IE eine Menge mysteriöser Leerzeichen um die Eingabeelemente klebt. Es ist nicht Polsterung oder Rand, und es ist verdammt hartnäckig. Wenn Sie eine Breite und Höhe für das Kontrollkästchen festlegen und dann overflow: hiddenaus irgendeinem Grund den zusätzlichen Platz einschränken, kann die Positionierung des IE sehr ähnlich wie bei Safari und Firefox erfolgen.
• Abhängig von Ihrer Textgröße müssen Sie zweifellos die relative Position, Breite, Höhe usw. anpassen, damit alles richtig aussieht.

Hoffe das hilft jemand anderem! Ich habe diese spezielle Technik bei keinem anderen Projekt als dem, an dem ich heute Morgen gearbeitet habe, ausprobiert. Wenn Sie also etwas finden, das konsistenter funktioniert, melden Sie sich auf jeden Fall.

Manchmal benötigt die vertikale Ausrichtung zwei Inline-Elemente (Bereich, Beschriftung, Eingabe usw.) nebeneinander, um ordnungsgemäß zu funktionieren. Die folgenden Kontrollkästchen sind in IE, Safari, FF und Chrome richtig vertikal zentriert, selbst wenn die Textgröße sehr klein oder groß ist.

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

Der Nachteil sind die besonders bedeutungslosen SPAN-Tags.

.checkboxes label {
  display: inline-block;
  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>

Nun, wenn Sie einen sehr langen Beschriftungstext haben , die benötigte ohne Verpackung unter dem Kontrollkästchen wickeln, dann würden Sie Polsterung und negative Texteinrückung auf den Kennzeichnungselementen verwenden:

.checkboxes label {
  display: block;
  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 so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</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>

Ich arbeite an der Lösung von One Crayon und habe 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>

Rendert Pixel für Pixel in Safari (dessen Basislinie ich vertraue) gleich und sowohl Firefox als auch IE7 checken als gut aus. Es funktioniert auch für verschiedene große und kleine Schriftgrößen. Nun zum Fixieren der IE-Basislinie für Auswahlen und Eingaben ...

Update: (Drittanbieter-Bearbeitung)

Die richtige bottomPosition hängt von der Schriftfamilie und der Schriftgröße ab! Ich fand, dass die Verwendung bottom: .08em;für Kontrollkästchen und Radioelemente ein guter allgemeiner Wert ist. Ich habe es in Chrome / Firefox / IE11 in Windows mit Arial- und Calibri-Schriftarten mit mehreren kleinen / mittleren / großen Schriftgrößen getestet.

.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 gut zu funktionieren scheint, 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

Versuchen vertical-align: middle

Auch Ihr Code scheint so zu sein, wie er sein sollte:

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

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

* {
  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 einzige 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: Geige

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

Mein HTML ist einfach:

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

Ich habe dann alle Kontrollkästchen 24pxfür Höhe und Breite aktiviert. Um den Text ausgerichtet Ich mache das Etikett ist line-heightauch 24pxund assign vertical-align: top;etwa so:

BEARBEITEN: Nach dem IE-Test habe ich vertical-align: bottom;die Eingabe hinzugefügt und das CSS des Labels geändert. Möglicherweise benötigen Sie einen bedingten IE-CSS-Fall, um das Auffüllen zu sortieren. Text und 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;
}

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

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 IE verwendet wurden):

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>

Ich hoffe, das hilft.

<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 im Inline-Block zu verwenden, wenn das Label-Tag verwendet wird.

Schauen wir uns zum Schluss die Ursache des Problems an

Die Kontrollkästchen werden mit Bildern gerendert (benutzerdefinierte können über CSS festgelegt werden). Hier ist ein (deaktiviertes) Kontrollkästchen in FireFox, das mit dem DOM-Inspektor hervorgehoben wird:

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). Was ist dieser Pseudorand rechts und unten im Kontrollkästchen? Dies sind Teile des Bildes, die für das Kontrollkästchen verwendet werden . Das ist der Grund, warum die Verwendung einfach vertical-align: middlenicht ausreicht und die Ursache für die browserübergreifenden Probleme ist.

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-Bilder), In-CSS-SVG oder einfach nur Pseudoelemente ersetzen. Es ist ein robuster (browserübergreifender!) Ansatz, und hier ist ein Beispiel für eine solche Anpassung, die aus dieser 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 solche Stile lesen, wie die hier aufgeführten . Es liegt außerhalb des Rahmens dieser Antwort.

Ok, was ist noch mit der Lösung ohne benutzerdefinierte Bilder oder Pseudoelemente?

TL; DR: Sieht so aus, als würde dies nicht funktionieren. Verwenden Sie stattdessen das benutzerdefinierte Kontrollkästchen

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

Welche Browser haben also die Pseudoränder in Kontrollkästchen? Ich habe Chrome 75, Vivaldi 2.5 (Chrom-basiert), FireFox 54 (fragen Sie nicht, warum so veraltet), IE 11, Edge 42, Safari? (für eine Minute ausgeliehen, vergessen, die Version zu überprüfen). Nur Chrome und Vivaldi haben solche Pseudoränder (ich vermute 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 damit 0,9-1,0 Pixel in absoluten Einheiten. Die Genauigkeit kann jedoch in Frage gestellt werden: Probieren Sie verschiedene Werte zoomfür das Kontrollkästchen aus. In meinen Tests in Chrome und Vivaldi ist die relative Größe des Pseudorandes bei den zoomWerten 10, 20 und 11-19 (??) sehr unterschiedlich :

scale scheint konsequenter 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.

Nachdem wir nun die Größe des Pseudorandes kennen (?), Beachten wir, dass dies nicht ausreicht. Sind die Größen der Kontrollkästchensymbole für alle Browser gleich? Ach! Folgendes zeigt der DOM-Inspektor für nicht gestaltete Kontrollkästchen:

• FireFox: 13,3 Pixel
• Chrombasiert : 12,8 Pixel für das Ganze, daher 12,8 (100% - 14%) = 11 Pixel für das, was visuell als Kontrollkästchen wahrgenommen wird
• IE 11, Edge: 13px
• Safari: n / a (diese sollten meiner Meinung nach auf demselben Bildschirm verglichen werden)

Bevor wir nun Lösungen oder Tricks diskutieren, fragen wir uns: 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 "schönen" Ausrichtungsaspekte vorstellen:

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

oder haben die gleiche mittlere Zeile in Kleinbuchstaben:

oder dieselbe mittlere Zeile 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 eine Ausrichtung schön, wenn sich das Kontrollkästchen auf derselben Grundlinie wie der Text befindet und die Größe eines Großbuchstabens hat (eine sehr umstrittene Wahl):

Welche Werkzeuge müssen wir nun:

1. Passen Sie die Größe des Kontrollkästchens an
2. Erkennen Sie Chromium anhand seines Kontrollkästchens mit Pseudorand und legen Sie bestimmte Stile fest
3. Passen Sie die vertikale Ausrichtung des Kontrollkästchens / Etiketts an

?

1. Die in Bezug auf Kontrollkästchen Größenanpassung : Es gibt width, height, size, zoom, scale(habe ich etwas verpasst?). zoomund scaleerlauben Sie nicht, die absolute Größe festzulegen, daher helfen sie möglicherweise nur beim Anpassen an die Textgröße, nicht beim Festlegen der browserübergreifenden Größe (es sei denn, wir können browserspezifische Regeln schreiben). sizefunktioniert nicht mit Chrome (hat es mit altem IE funktioniert? sowieso ist es nicht so interessant). widthund heightarbeiten in Chrome und anderen Browsern, sodass wir eine gemeinsame Größe festlegen können, aber auch in Chrome wird die Größe des gesamten Bilds festgelegt, nicht das Kontrollkästchen selbst. Hinweis: Es ist das Minimum (Breite, Höhe), das die Größe eines Kontrollkästchens definiert (wenn Breite ≠ Höhe ist, wird der Bereich außerhalb des Kontrollkästchenquadrats zum "Pseudorand" hinzugefügt).

   Leider werden die Pseudoränder im Chrome-Kontrollkästchen, soweit ich sehen kann, für keine Breite und Höhe auf Null gesetzt.

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

3. Betrachten wir die vertikale Ausrichtung. vertical-alignWenn middleoder baselineaufgrund des Pseudorandes von Chrome nicht konsistente Ergebnisse erzielt werden können , besteht die einzige echte Option, um für alle Browser das gleiche "Koordinatensystem" zu erhalten, darin, Beschriftung und Eingabe auf Folgendes auszurichten top:

   

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

Welches Ergebnis erhalten wir 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 so anzupassen, dass die Bild-Eigenart des Chromium-Kontrollkästchens umgangen wird. Mein letzter Vorschlag lautet: Verwenden Sie stattdessen benutzerdefinierte Kontrollkästchen - und Sie vermeiden Frustration :)

Jetzt, da Flexbox in allen modernen Browsern unterstützt wird, scheint mir so etwas ein einfacher Ansatz 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 der vorangestellten Version:

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 denke, das ist der einfachste Weg

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

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

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

Ich habe festgestellt, vertical-align: subdass Kontrollkästchen in Chrome, Firefox und Opera gut genug ausgerichtet sind. Ich kann Safari nicht überprüfen, da ich kein MacOS habe und IE10 leicht ausgeschaltet ist, aber ich habe festgestellt, dass es 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% / pixels / EMs zu optimieren: http://css-tricks.com/snippets/css/browser-specific-hacks/

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>

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

Die Zeiten haben sich geändert und neue CSS3-Lösungen sind jetzt möglich. Meine Lösung verwendet Pseudoelemente , um ein benutzerdefiniertes Kontrollkästchen zu erstellen . Die Bestimmungen (Vor- oder Nachteile, wie auch immer Sie es betrachten) lauten 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 gerendert wird. Hier habe ich gerade einige einfache Farben ausgewählt, aber Sie können immer lineare Verläufe und dergleichen hinzufügen, um es mehr zu einem Knall zu machen.
• Ist auf eine bestimmte Schriftart / Schriftgröße ausgerichtet. Wenn Sie diese ändern, ändern Sie einfach die Position und Größe des Kontrollkästchens, damit es vertikal ausgerichtet angezeigt wird. Bei korrekter Optimierung sollte das Endergebnis in allen Browsern / Betriebssystemen nahezu gleich sein.
• Keine vertikalen Ausrichtungseigenschaften, keine Floats
• In meinem Beispiel muss das bereitgestellte Markup verwendet werden. Es funktioniert nicht, wenn es wie die Frage strukturiert ist. Das Layout sieht jedoch im Wesentlichen gleich aus. Wenn Sie Dinge verschieben möchten, müssen Sie auch das zugehörige CSS verschieben

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

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

Diese Lösung blendet das Kontrollkästchen aus und fügt der Beschriftung Pseudoelemente hinzu und formatiert sie, um das sichtbare Kontrollkästchen zu erstellen. Da das Etikett an das ausgeblendete Kontrollkästchen gebunden ist, wird das Eingabefeld weiterhin aktualisiert und der Wert wird mit dem Formular gesendet.

Und wenn Sie interessiert sind, sehen Sie hier meine Optionsfelder: http://jsfiddle.net/DtKrV/2/

Hoffe jemand findet das nützlich!

Ich hatte noch nie ein Problem damit:

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

Wenn Sie ASP.NET Web Forms verwenden, müssen Sie sich keine Gedanken über DIVs und andere Elemente oder feste Größen machen. Wir können den <asp:CheckBoxList>Text ausrichten, indem float:leftwir den Eingabetyp CheckboxList in CSS festlegen.

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>

Wenn Sie Twitter Bootstrap verwenden, können Sie die checkboxKlasse einfach für Folgendes verwenden <label>:

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

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

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

das hat bei mir 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 des mit der Linienhöhe des (Blocklevel) identisch ist.

Codieren Sie die Höhe und Breite des Kontrollkästchens fest, entfernen Sie die Polsterung und machen Sie die Höhe plus vertikale Ränder gleich der Zeilenhöhe des Etiketts. Wenn der Beschriftungstext inline ist, schweben Sie das Kontrollkästchen. Firefox, Chrome und IE7 + rendern das folgende Beispiel identisch: http://www.kornea.com/css-checkbox-align

Normalerweise lasse ich ein Kontrollkästchen unbeschriftet und mache dann seine "Beschriftung" zu einem separaten Element. Es ist ein Schmerz, aber es gibt so viele browserübergreifende Unterschiede zwischen der Anzeige von Kontrollkästchen und ihren Beschriftungen (wie Sie bemerkt haben), dass ich nur so annähernd steuern kann, wie alles aussieht.

Aus dem gleichen Grund mache ich dies auch in der Winforms-Entwicklung. Ich denke, das grundlegende Problem mit dem Kontrollkästchen-Steuerelement besteht darin, dass es sich tatsächlich um zwei verschiedene Steuerelemente handelt: das Kontrollkästchen und das Etikett. Wenn Sie ein Kontrollkästchen verwenden, überlassen Sie es den Implementierern des Steuerelements, zu entscheiden, wie diese beiden Elemente nebeneinander angezeigt werden (und sie verstehen es immer falsch, wobei falsch = nicht das, was Sie wollen).

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

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 platziert Ihre Listenelemente in drei Elementen und ändert nur die Breite entsprechend.

Das Folgende sorgt für eine pixelgenaue Konsistenz über alle Browser hinweg, sogar über IE9:

Der Ansatz ist durchaus sinnvoll, bis er offensichtlich ist:

1. Erstellen Sie eine Eingabe und eine Beschriftung.
2. Zeigen Sie sie als Block an, damit Sie sie nach Belieben schweben lassen können.
3. Stellen Sie die Höhe und die Linienhöhe auf den gleichen Wert ein, um sicherzustellen, dass sie vertikal zentriert und ausgerichtet sind.
4. Für em- 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.

Dies führt zu einer global anwendbaren allgemeinen Regel:

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

Die Schriftgröße kann pro Formular, Feldsatz oder Element angepasst werden.

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

Getestet in den neuesten Versionen von Chrome, Safari und Firefox für Mac, Windows, Iphone und Android. Und IE9.

Diese Methode ist wahrscheinlich auf alle Eingabetypen anwendbar, die nicht höher als eine Textzeile sind. Wenden Sie eine entsprechende Typregel an.

Ich weiß also, dass dies schon oft beantwortet wurde, aber ich habe das Gefühl, dass ich eine elegantere Lösung habe als die, die bereits bereitgestellt wurden. Und nicht nur 1 elegante Lösung, sondern 2 separate Lösungen, die Sie begeistern werden. Alles, was Sie wissen und sehen müssen, ist in 2 JS Fiddles mit Kommentaren enthalten.

Lösung Nr. 1 basiert auf dem nativen "Kontrollkästchen" des angegebenen Browsers, allerdings mit einer Wendung ... Es ist in einem div enthalten, das sich browserübergreifend leichter positionieren lässt, mit einem Überlauf: versteckt, um den Überschuss eines 1px-gestreckten Kontrollkästchens zu beseitigen (Dies ist so, dass Sie die hässlichen Grenzen von FF nicht sehen können)

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

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

Lösung 2 verwendet den "Checkbox Toggle Hack", um den CSS-Status eines DIVs umzuschalten, der im Browser ordnungsgemäß positioniert wurde, und mit einem einfachen Sprite für die deaktivierten und aktivierten Kontrollkästchen-Status einzurichten. Alles, was benötigt wird, ist die Anpassung der Hintergrundposition mit dem Checkbox Toggle Hack. Dies ist meiner Meinung nach die elegantere Lösung, da Sie mehr Kontrolle über Ihre Kontrollkästchen und Radios haben und garantieren können, dass sie im gesamten Browser gleich aussehen.

Einfaches 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 dazu hören, warum andere nicht auf diese Lösungen gestoßen sind, oder wenn ja, warum ich hier keine Antworten dazu sehe. Wenn jemand sieht, dass eine dieser Methoden fehlschlägt, wäre es auch schön, das zu sehen, aber diese wurden in den neuesten Browsern getestet und basieren auf HTML / CSS-Methoden, die ziemlich alt und meines Erachtens universell sind.

Yay danke! Auch das hat mich für immer verrückt gemacht.

In meinem speziellen Fall hat dies bei mir 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 Datei reset.css, die einige der Unterschiede erklären könnte, aber dies scheint für mich gut zu funktionieren.

position: relative; hat einige Probleme im IE mit Z-Index und Animationen wie jQuerys slideUp / slideDown.

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 wahrscheinlich in Abhängigkeit von der verwendeten Schriftgröße angepasst werden <label>

PS:
Ich benutze ie7js , damit das CSS in IE6 funktioniert.

Verwenden Sie einfach vertical-align: sub, wie Pokrishka bereits vorgeschlagen.

Geige

HTML Quelltext:

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

CSS-Code:

.checkboxes input {
    vertical-align: sub;
}

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+