Jest to jeden z mniejszych problemów CSS, który ciągle mnie trapi. W jaki sposób ludzie wokół przepełnienia stosu wyrównują się w pionie checkboxesi labelskonsekwentnie korzystają z różnych przeglądarek ? Ilekroć wyrównuję je poprawnie w Safari (zwykle używam vertical-align: baselinena input), są one całkowicie wyłączone w Firefox i IE. Napraw to w Firefoksie, a Safari i IE są nieuchronnie pomieszane. Tracę na tym czas za każdym razem, gdy koduję formularz.

Oto standardowy kod, z którym pracuję:

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

Zwykle używam resetowania Erica Meyera, więc elementy formularza są względnie czyste od przesłonięć. Czekamy na wszelkie porady i wskazówki, które masz do zaoferowania!

Po ponad godzinie poprawiania, testowania i próbowania różnych stylów znaczników, myślę, że mogę mieć przyzwoite rozwiązanie. Wymagania dla tego konkretnego projektu były następujące:

1. Wejścia muszą być w osobnej linii.
2. Pola wyboru muszą być wyrównane pionowo z tekstem etykiety podobnie (jeśli nie identycznie) we wszystkich przeglądarkach.
3. Jeśli tekst etykiety jest zawijany, musi być wcięty (aby nie zawijał się pod polem wyboru).

Zanim przejdę do wyjaśnienia, dam ci kod:

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>

Oto działający przykład w JSFiddle .

Ten kod zakłada, że ​​używasz resetowania takiego jak Eric Meyer, który nie zastępuje marginesów wejściowych i dopełniania (stąd wstawianie resetu marginesów i dopełniania do wejściowego CSS). Oczywiście w środowisku na żywo prawdopodobnie zagnieżdżasz / zastępujesz elementy w celu obsługi innych elementów wejściowych, ale chciałem zachować prostotę.

Ważne uwagi:

• *overflowDeklaracja jest inline IE Hack (hack gwiazdy nieruchomość). Zarówno IE 6, jak i 7 to zauważą, ale Safari i Firefox odpowiednio go zignorują. Myślę, że może to być poprawny CSS, ale nadal lepiej jest z komentarzami warunkowymi; użyłem go dla uproszczenia.
• Jak mogę najlepiej powiedzieć, jedynym vertical-alignstwierdzeniem, które było spójne w różnych przeglądarkach, było vertical-align: bottom. Ustawienie tego, a następnie względne ustawienie w górę zachowało się prawie identycznie w Safari, Firefox i IE z tylko jednym pikselem lub dwoma rozbieżnościami.
• Głównym problemem w pracy z wyrównaniem jest to, że IE umieszcza tajemniczą przestrzeń wokół elementów wejściowych. To nie jest padding ani margines i jest cholernie trwałe. Ustawienie szerokości i wysokości pola wyboru, a następnie overflow: hiddenz jakiegoś powodu odcina dodatkową przestrzeń i pozwala pozycjonowaniu IE działać bardzo podobnie do Safari i Firefox.
• W zależności od rozmiaru tekstu bez wątpienia będziesz musiał dostosować względne położenie, szerokość, wysokość itd., Aby wszystko wyglądało dobrze.

Mam nadzieję, że to pomoże komuś innemu! Nie próbowałem tej konkretnej techniki w żadnym innym projekcie niż ten, nad którym pracowałem dziś rano, więc zdecydowanie pomóżcie, jeśli znajdziecie coś, co działa bardziej konsekwentnie.

Czasami wyrównanie w pionie wymaga dwóch wbudowanych elementów (zakresu, etykiety, danych wejściowych itp.) Obok siebie, aby działać poprawnie. Następujące pola wyboru są odpowiednio wyśrodkowane pionowo w IE, Safari, FF i Chrome, nawet jeśli rozmiar tekstu jest bardzo mały lub duży.

Wszystkie unoszą się obok siebie w tym samym wierszu, ale nowrap oznacza, że ​​cały tekst etykiety zawsze pozostaje obok pola wyboru.

Minusem są dodatkowe bezsensowne tagi SPAN.

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

Teraz, jeśli masz bardzo długi tekst etykiety, który trzeba było zawinąć bez zawijania pod polem wyboru, możesz użyć dopełnienia i wcięcia w tekście negatywnym na elementach etykiety:

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

Pracując nad rozwiązaniem One Crayon , mam coś, co działa dla mnie i jest prostsze:

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

Renderuje piksel za piksel tak samo w Safari (którego linii bazowej ufam), a zarówno Firefox, jak i IE7 sprawdzają się dobrze. Działa również dla różnych rozmiarów czcionek etykiet, dużych i małych. Teraz, do ustalenia linii bazowej IE dla selekcji i danych wejściowych ...

Aktualizacja: (edycja innej firmy)

Właściwa bottompozycja zależy od rodziny czcionek i rozmiaru czcionki! Zauważyłem, że użycie bottom: .08em;elementów kontrolnych i radiowych jest dobrą wartością ogólną. Przetestowałem to w Chrome / Firefox / IE11 w systemie Windows z czcionkami Arial i Calibri, używając kilku małych / średnich / dużych rozmiarów czcionek.

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

Jedną łatwą rzeczą, która wydaje się działać dobrze, jest dostosowanie pionowej pozycji pola wyboru za pomocą wyrównania pionowego. Wciąż będzie się różnić w różnych przeglądarkach, ale rozwiązanie jest nieskomplikowane.

input {
    vertical-align: -2px;
}

Odniesienie

próbować vertical-align: middle

również twój kod wydaje się być taki:

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

Wypróbuj moje rozwiązanie, wypróbowałem je w IE 6, FF2 i Chrome i renderuje piksel po pikselu we wszystkich trzech przeglądarkach.

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

Jedyne dla mnie idealnie działające rozwiązanie to:

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

Testowane dzisiaj w Chrome, Firefox, Opera, IE 7 i 8. Przykład: Fiddle

Nie przetestowałem całkowicie mojego rozwiązania, ale wydaje się, że działa świetnie.

Mój HTML to po prostu:

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

Następnie ustawiam wszystkie pola wyboru 24pxdla wysokości i szerokości. Aby tekst był wyrównany robię etykieta jest line-heightrównież 24pxi przypisać vertical-align: top;tak:

EDYCJA: Po przetestowaniu IE dodałem vertical-align: bottom;do danych wejściowych i zmieniłem CSS etykiety. Może się okazać, że potrzebujesz warunkowego przypadku IE css, aby uporządkować wypełnienie - ale tekst i pole są wbudowane.

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>

Jeśli ktoś stwierdzi, że to nie działa, proszę dać mi znać. Oto jest w akcji (w Chrome i IE - przeprosiny, ponieważ zrzuty ekranu zostały zrobione na siatkówce i przy użyciu paraleli dla IE):

Zazwyczaj używam wysokości linii, aby dopasować pionowe położenie mojego tekstu statycznego:

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>

Mam nadzieję, że to pomaga.

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

Sztuką jest użycie wyrównania w pionie tylko w komórkach tabeli lub w wierszu blokowym, jeśli używany jest znacznik etykiety.

Na koniec spójrzmy na źródło problemu

Pola wyboru są renderowane przy użyciu obrazów (można ustawić niestandardowe za pomocą CSS). Oto (niezaznaczone) pole wyboru w FireFox, podświetlone za pomocą inspektora DOM:

A oto to samo niestylowane pole wyboru w Chrome:

Możesz zobaczyć margines (pomarańczowy); wypełnienie nie jest obecne (byłoby pokazane na zielono). Więc co to za pseudo-margines po prawej i na dole pola wyboru? Są to części obrazu użyte dla pola wyboru . Dlatego używanie po prostu vertical-align: middletak naprawdę nie wystarcza i jest to przyczyną problemów w różnych przeglądarkach.

Co więc możemy z tym zrobić?

Jedną z oczywistych opcji jest - zastąp zdjęcia! Na szczęście można to zrobić za pomocą CSS i zastąpić je obrazami zewnętrznymi, obrazami base64 (in-CSS), svg w CSS lub po prostu pseudoelementami. Jest to solidne podejście (w różnych przeglądarkach!), A oto przykład takiej korekty skradzionej z tego pytania :

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

Możesz przeczytać bardziej szczegółowe artykuły na temat takich stylizacji, takie jak niektóre wymienione tutaj ; jest poza zakresem tej odpowiedzi.

Ok, nadal co z rozwiązaniem no-custom-images-or-pseudo-elements?

TL; DR: wygląda na to, że to nie zadziała, zamiast tego użyj niestandardowego pola wyboru

Po pierwsze, zauważmy, że jeśli w innych przeglądarkach te pseudo-marginesy wewnątrz ikony pola wyboru były dowolne, nie byłoby spójnego rozwiązania. Aby go zbudować, musimy zbadać anatomię takich obrazów w istniejących przeglądarkach.

Więc jakie przeglądarki mają pseudo-marginesy w polach wyboru? Sprawdziłem Chrome 75, Vivaldi 2.5 (oparty na Chromium), FireFox 54 (nie pytaj, dlaczego tak nieaktualny), IE 11, Edge 42, Safari ?? (pożyczyłem jeden na minutę, zapomniałem sprawdzić wersję). Tylko Chrome i Vivaldi mają takie pseudo-marginesy (podejrzewam również, że wszystkie przeglądarki oparte na Chromium, takie jak Opera).

Jaki jest rozmiar tych pseudo-marginesów? Aby to rozgryźć, można użyć powiększonego pola wyboru:

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

<input type=checkbox>

mój wynik to ~ 7% szerokości / wysokości, a zatem 0,9-1,0px w jednostkach bezwzględnych. Dokładność może jednak zostać zakwestionowana: wypróbuj różne wartości zoomdla pola wyboru. W moich testach zarówno w Chrome, jak i Vivaldi, względny rozmiar pseudo-marginesu jest bardzo różny dla zoomwartości 10, 20 i dla wartości 11-19 (??):

scale wydaje się bardziej spójny:

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

<input type=checkbox>

więc prawdopodobnie ~ 14% i 2px są poprawnymi wartościami.

Teraz, gdy wiemy (?) Rozmiar pseudo-marginesu, zauważmy, że to nie wystarczy. Czy rozmiary ikon pól wyboru są takie same dla wszystkich przeglądarek? Niestety! Oto, co pokazuje inspektor DOM dla niestylowanych pól wyboru:

• FireFox: 13,3px
• Oparty na chromie : 12,8 pikseli za całość, stąd 12,8 (100% - 14%) = 11 pikseli za to, co jest wizualnie postrzegane jako pole wyboru
• IE 11, Edge: 13px
• Safari: nie dotyczy (uważam, że należy je porównać na tym samym ekranie)

Zanim omówimy jakieś rozwiązania lub sztuczki, zapytajmy: co to jest prawidłowe wyrównanie? Co staramy się osiągnąć? Do pewnego stopnia jest to kwestia gustu, ale w zasadzie mogę myśleć o następujących aspektach „miłych” dopasowań:

tekst i pole wyboru na tej samej linii bazowej (celowo nie zmieniam tutaj pola wyboru):

lub mają tę samą środkową linię pod względem małych liter:

lub ta sama środkowa linia pod względem wielkich liter (łatwiej zobaczyć różnicę dla różnych rozmiarów czcionek):

a także musimy zdecydować, czy rozmiar pola wyboru powinien być równy wysokości małej litery, dużej litery lub czegoś innego (większy, mniejszy lub między małymi a dużymi).

W tej dyskusji nazwijmy wyrównanie ładnym, jeśli pole wyboru znajduje się na tej samej linii bazowej co tekst i ma wielkość dużej litery (wysoce dyskusyjny wybór):

Teraz jakie narzędzia musimy:

1. dostosuj rozmiar pola wyboru
2. rozpoznaj Chromium za pomocą jego pseudo-marginesowego pola wyboru i ustaw określone style
3. dostosuj wyrównanie pionowe pola wyboru / etykiety

?

1. Jeśli chodzi o regulację wielkości pola wyboru : istnieją width, height, size, zoom, scale(mieć coś przeoczyłem?). zoomi scalenie pozwalają ustawiać rozmiaru bezwzględnego, więc mogą pomóc tylko w dostosowaniu do rozmiaru tekstu, a nie ustawiać rozmiaru w różnych przeglądarkach (chyba że możemy napisać reguły specyficzne dla przeglądarki). sizenie działa z Chrome (czy działało ze starą IE? zresztą to nie jest takie interesujące). widthi heightdziałamy w Chrome i innych przeglądarkach, więc możemy ustawić wspólny rozmiar, ale znowu w Chrome ustawia rozmiar całego obrazu, a nie samego pola wyboru. Uwaga: minimalna (szerokość, wysokość) określa rozmiar pola wyboru (jeśli szerokość ≠ wysokość, pole poza kwadratem pola wyboru jest dodawane do „pseudo-marginesu”).

   Niefortunne jest to, że pseudo-marginesy w Chrome nie są ustawione na zero dla żadnej szerokości i wysokości, o ile widzę.

2. Obawiam się, że obecnie nie ma niezawodnej metody opartej tylko na CSS .

3. Rozważmy wyrównanie pionowe. vertical-alignnie może dać spójnych wyników po ustawieniu na middlelub z baselinepowodu pseudo-marginesu Chrome, jedyną realną opcją uzyskania tego samego „układu współrzędnych” dla wszystkich przeglądarek jest wyrównanie etykiety i danych wejściowych do top:

   

   (na zdjęciu: wyrównanie w pionie: góra, dół i dół bez cienia)

Jaki więc z tego wynikniemy?

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

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

Powyższy fragment działa z Chrome (przeglądarki oparte na Chromium), ale inne przeglądarki wymagają mniejszego rozmiaru pola wyboru. Wydaje się, że niemożliwe jest dostosowanie zarówno rozmiaru, jak i wyrównania w pionie w sposób, który działa wokół dziwactwa obrazu pola wyboru Chromium. Moja ostatnia propozycja to: zamiast tego użyj niestandardowych pól wyboru - unikniesz frustracji :)

Teraz, gdy Flexbox jest obsługiwany we wszystkich nowoczesnych przeglądarkach, coś takiego wydaje mi się łatwiejsze.

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

Oto pełna wersja demonstracyjna z prefiksowaną wersją:

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>

Myślę, że to najłatwiejszy sposób

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

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

Nie podoba mi się pozycjonowanie względne, ponieważ powoduje, że element jest renderowany ponad wszystko inne na jego poziomie (może mieć coś nad sobą, jeśli masz złożony układ).

Odkryłem, że vertical-align: subsprawia , że pola wyboru wyglądają wystarczająco dobrze wyrównane w Chrome, Firefox i Opera. Nie mogę sprawdzić Safari, ponieważ nie mam MacOS, a IE10 jest nieco wyłączony, ale okazało się, że jest to dla mnie wystarczająco dobre rozwiązanie.

Innym rozwiązaniem może być próba stworzenia określonego CSS dla każdej przeglądarki i dostrojenie go za pomocą wyrównania w pionie w% / pixel / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

Działa to dla mnie dobrze:

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>

Wybrana odpowiedź z ponad 400 głosami pozytywnymi nie działała dla mnie w Chrome 28 OSX, prawdopodobnie dlatego, że nie została przetestowana w OSX lub że działała w czymkolwiek, co było w 2008 roku, kiedy odpowiedź na to pytanie.

Czasy się zmieniły, a nowe rozwiązania CSS3 są teraz wykonalne. Moje rozwiązanie wykorzystuje pseudoelementy do utworzenia niestandardowego pola wyboru . Więc postanowienia (plusy lub minusy, jakkolwiek na to spojrzeć) są następujące:

• Działa tylko w nowoczesnych przeglądarkach (FF3.6 +, IE9 +, Chrome, Safari)
• Opiera się na specjalnie zaprojektowanym polu wyboru, które będzie renderowane dokładnie tak samo w każdej przeglądarce / systemie operacyjnym. Tutaj właśnie wybrałem kilka prostych kolorów, ale zawsze możesz dodawać gradienty liniowe i takie, aby nadać mu mocniejszy wybuch.
• Jest dostosowany do określonej czcionki / rozmiaru czcionki, który w przypadku zmiany wystarczy zmienić położenie i rozmiar pola wyboru, aby wyglądało na wyrównane w pionie. Jeśli poprawione poprawnie, wynik końcowy powinien być prawie dokładnie taki sam we wszystkich systemach przeglądarek / systemach operacyjnych.
• Brak właściwości wyrównania w pionie, brak pływaków
• Należy użyć dostarczonego znacznika w moim przykładzie, nie będzie działać, jeśli będzie miał strukturę podobną do pytania, jednak układ będzie wyglądał zasadniczo tak samo. Jeśli chcesz przenosić różne elementy, musisz także przenieść związany z nimi 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;
}

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

To rozwiązanie ukrywa pole wyboru oraz dodaje i stylizuje pseudoelementy do etykiety, aby utworzyć widoczne pole wyboru. Ponieważ etykieta jest powiązana z ukrytym polem wyboru, pole wejściowe będzie nadal aktualizowane, a wartość zostanie przesłana z formularzem.

A jeśli jesteś zainteresowany, oto moje spojrzenie na przyciski radiowe: http://jsfiddle.net/DtKrV/2/

Mam nadzieję, że ktoś uzna to za przydatne!

Nigdy nie miałem z tym problemu:

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

Jeśli korzystasz z formularzy internetowych ASP.NET , nie musisz martwić się o DIV i inne elementy lub stałe rozmiary. Możemy wyrównać <asp:CheckBoxList>tekst, ustawiając float:lefttyp wejściowy CheckboxList w CSS.

Sprawdź następujący przykładowy kod:

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

Kod .ASPX:

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

Jeśli używasz Bootstrap na Twitterze, możesz po prostu użyć checkboxklasy na <label>:

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

Z polem wyboru typu danych wejściowych owiniętym wewnątrz etykiety i przesuniętym w lewo w następujący sposób:

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

to działało dla mnie:

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

Upewnij się, że wysokość jest identyczna z wysokością linii (poziom bloku).

Zakoduj na stałe wysokość i szerokość pola wyboru, usuń dopełnienie i ustaw jego wysokość plus pionowe marginesy równe wysokości linii etykiety. Jeśli tekst etykiety jest wbudowany, umieść pole wyboru. Firefox, Chrome i IE7 + renderują identycznie następujący przykład: http://www.kornea.com/css-checkbox-align

Zazwyczaj zostawiam pole wyboru nieoznaczone, a następnie umieszczam jego „etykietę” jako osobny element. To bolesne, ale istnieje tak duża różnica między przeglądarkami między sposobem wyświetlania pól wyboru i ich etykiet (jak zauważyłeś), że jest to jedyny sposób, w jaki mogę zbliżyć się do kontrolowania, jak wszystko wygląda.

Z tego samego powodu robię to również przy tworzeniu winforms. Myślę, że podstawowym problemem z formantem pola wyboru jest to, że tak naprawdę są to dwa różne formanty: pole i etykieta. Używając pola wyboru, pozostawiasz to implementatorom kontroli, aby zdecydowali, w jaki sposób te dwa elementy są wyświetlane obok siebie (i zawsze źle to robią, gdzie źle = nie to, czego chcesz).

Naprawdę mam nadzieję, że ktoś ma lepszą odpowiedź na twoje pytanie.

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>

Powyższy kod umieści elementy listy w trzykolach i po prostu zmieni szerokość w celu dopasowania.

Poniższe informacje zapewniają spójną w pikselach spójność między przeglądarkami, nawet IE9:

Podejście to jest dość rozsądne, do tego stopnia, że ​​jest oczywiste:

1. Utwórz dane wejściowe i etykietę.
2. Wyświetlaj je jako blok, dzięki czemu możesz unosić je w dowolny sposób.
3. Ustaw wysokość i wysokość linii na tę samą wartość, aby zapewnić ich wyśrodkowanie i wyrównanie w pionie.
4. W przypadku pomiarów em , aby obliczyć wysokość elementów, przeglądarka musi znać wysokość czcionki dla tych elementów i sama nie może być ustawiona w pomiarach em.

Wynikiem tego jest ogólna zasada ogólna:

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

Rozmiar czcionki dostosowywany do formularza, zestawu pól lub elementu.

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

Testowane w najnowszych przeglądarkach Chrome, Safari i Firefox na komputerach Mac, Windows, Iphone i Androidzie. I IE9.

Ta metoda prawdopodobnie ma zastosowanie do wszystkich typów wprowadzania, które nie są wyższe niż jeden wiersz tekstu. Zastosuj odpowiednią regułę typu.

Wiem, że na to pytanie udzielono odpowiedzi wiele razy, ale czuję, że mam o wiele bardziej eleganckie rozwiązanie niż te, które już zostały dostarczone. I nie tylko 1 eleganckie rozwiązanie, ale 2 oddzielne rozwiązania, które łaskoczą Twoją fantazję. Powiedziawszy to, wszystko, co musisz wiedzieć i zobaczyć, znajduje się w 2 JS Fiddle, z komentarzami.

Rozwiązanie nr 1 polega na natywnym „polu wyboru” danej przeglądarki, choć z pewnym akcentem ... Jest zawarty w div, który jest łatwiejszy do pozycjonowania w różnych przeglądarkach, z przepełnieniem: ukryty, aby posiekać nadmiar rozciągniętego pola wyboru 1px (jest tak, że nie widać brzydkich granic FF)

Prosty HTML: (kliknij link, aby przejrzeć css z komentarzami, blok kodu ma zaspokoić przepływ stosu ) http://jsfiddle.net/KQghJ/

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

Rozwiązanie nr 2 używa „Checkbox Toggle Hack” do przełączania stanu CSS DIV, który został poprawnie umieszczony w przeglądarce i skonfigurowany za pomocą prostego duszka dla pola wyboru niezaznaczonego i zaznaczonego. Wszystko, co jest potrzebne, to dostosowanie pozycji tła za pomocą wspomnianego pola wyboru Przełącz hack. To, moim zdaniem, jest bardziej eleganckie rozwiązanie, ponieważ masz większą kontrolę nad polami wyboru i radiotelefonami i może zagwarantować, że będą wyglądać tak samo w przeglądarce.

Prosty HTML: (kliknij link, aby przejrzeć CSS z komentarzami, blok kodu ma spełnić StackOverflow) http://jsfiddle.net/Sx5M2/

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

Jeśli ktoś nie zgadza się z tymi metodami, proszę zostawić komentarz, chciałbym usłyszeć opinie na temat tego, dlaczego inni nie natknęli się na te rozwiązania, a jeśli tak, dlaczego nie widzę tutaj odpowiedzi na ich temat? Jeśli ktoś zobaczy, że jedna z tych metod zawodzi, dobrze byłoby to również zobaczyć, ale zostały one przetestowane w najnowszych przeglądarkach i polegają na metodach HTML / CSS, które są dość stare i uniwersalne, o ile widziałem.

Dziękuję! To też doprowadzało mnie do szału na zawsze.

W moim szczególnym przypadku działało to dla mnie:

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

Używam reset.css, co może wyjaśniać niektóre różnice, ale wydaje mi się, że działa to dobrze.

position: relative; ma pewne problemy w IE z indeksem Z i animacjami, takie jak slideUp / slideDown 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');
    }
});

Styl prawdopodobnie wymaga poprawek w zależności od używanego rozmiaru czcionki <label>

PS:
Używam ie7js, aby css działał w IE6.

Używaj po prostu vertical-align: sub, jak już sugerowano pokrishka .

Skrzypce

Kod HTML:

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

Kod CSS:

.checkboxes input {
    vertical-align: sub;
}

Proste rozwiązanie:

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

Testowane w Chrome, Firefox, IE9 +, Safari, iOS 9+