Jak konsekwentnie wyrównywać pola wyboru i ich etykiety między przeglądarkami

Czasami vertical-align wymaga dwóch inline (span, label, input, itp...) elementy obok siebie, aby działały prawidłowo. Poniższe pola wyboru są prawidłowo 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 tej samej linii, ale nowrap oznacza, że cały tekst etykiety zawsze pozostaje obok pola wyboru.

Minusem są dodatkowe bezsensowne znaczniki SPAN.

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

Teraz, jeśli masz bardzo długi tekst etykiety, który potrzebował do zawijania bez zawijania pod pole wyboru, używasz wypełnienia i negatywnego wcięcia na elementach etykiety:

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

Pracując z rozwiązaniem jednej kredki , mam coś, co działa dla mnie i jest prostsze:

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>

Renderuje piksel za piksel tak samo w Safari (której bazowej ufam) i zarówno Firefox i IE7 sprawdzić jako dobre. Działa również dla różnych rozmiarów czcionek etykiet, dużych i małych. Teraz, dla ustalenia linii bazowej IE na selekcjach i wejściach...

Jedną z łatwych rzeczy, która wydaje się działać dobrze, jest zastosowanie ustawienia pionowej pozycji pola wyboru z vertical-align. Nadal będzie się różnić w różnych przeglądarkach, ale rozwiązanie jest nieskomplikowane.

input {
    vertical-align: -2px;
}

Bibliografia

Try vertical-align: middle

Również Twój kod wydaje się być:

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

Wypróbuj moje rozwiązanie, próbowałem go 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 doskonale 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

Zwykle używam wysokości linii, aby dostosować pionową pozycję mojego statycznego tekstu:

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>

Nie do końca przetestowałem moje rozwiązanie, ale wydaje się, że działa świetnie.

Mój HTML jest po prostu:

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

Następnie ustawiam wszystkie pola wyboru na 24px dla wysokości i szerokości. Aby tekst był wyrównany, dodaję line-height również 24px i przypisuję vertical-align: top; Tak:

EDIT: po testach IE dodałem vertical-align: bottom; do wejścia i zmieniłem CSS etykiety. Może się okazać, że potrzebujesz warunkowego przypadku IE css do uporządkowania wypełnienia - ale tekst i pole są 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;
}

Myślę, że to najprostszy sposób

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

Fiddle

To działa dobrze dla mnie:

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>

Nie lubię pozycjonowania względnego, ponieważ sprawia, że element renderowany JEST PONAD Wszystko inne na swoim poziomie(może się na czymś dostać, jeśli masz złożony układ).

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

Innym rozwiązaniem może być próba stworzenia specyficznego CSS dla każdej przeglądarki i dostroić go z niektórych pionowe wyrównanie w % / pikseli / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

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

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>

Nigdy nie miałem problemu z robieniem tego w ten sposób:

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

Chciałem tylko dodać do dyskusji o atrybucie 'for' na etykietach (nieco offtopic):

Proszę go dostarczyć, nawet jeśli nie jest to konieczne, ponieważ jest tak bardzo wygodny w użyciu z javascript:

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

Jest to o wiele wygodniejsze niż próba ustalenia, gdzie etykieta ma zagnieżdżone wejście, czy gdzie wejście znajduje się przed etykietą lub po niej.. itd. I nigdy nie zaszkodzi jej dostarczyć.. więc.

Jeśli używasz ASP.NET formularze internetowe nie musisz się martwić o Div I inne elementy lub stałe rozmiary. Możemy wyrównać <asp:CheckBoxList> tekst ustawiając float:left na typ wejścia CheckboxList w CSS.

Proszę sprawdzić poniższy 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>

Wybrana odpowiedź Z 400 + głosami nie zadziałała dla mnie w Chrome 28 OSX, prawdopodobnie dlatego, że nie była testowana w OSX lub że działała w tym, co było w 2008 roku, kiedy na to pytanie odpowiedziano.

Czasy się zmieniły, a nowe rozwiązania CSS3 są teraz możliwe. Moje rozwiązanie wykorzystuje pseudoelementy do utworzenia własnego checkboxa . Tak więc Warunki (za lub przeciw, jakkolwiek na to patrzysz) 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żna dodać liniowe gradienty i takie, aby dać mu więcej hukiem.
• jest nastawiona na określoną czcionkę/rozmiar czcionki, która w przypadku zmiany, po prostu zmienisz położenie i rozmiar pola wyboru, aby wyglądało na wyrównane pionowo. Jeśli poprawne dopasowanie, wynik końcowy nadal powinien być zbliżony do dokładnie tego samego we wszystkich przeglądarkach / systemach operacyjnych.
• brak właściwości wyrównania pionowego, brak pływaków
• musi użyć podanego znacznika w moim przykładzie, to nie będzie działać, jeśli zorganizowany jak pytanie, jednak układ będzie zasadniczo wyglądać tak samo. Jeśli chcesz przenosić rzeczy, musisz również przenieść powiązany CSS

Twój HTML:

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

Twój 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;
}

To rozwiązanie ukrywa pole wyboru i dodaje i stylizuje pseudoelementy do etykiety, aby Utwórz widoczne pole wyboru. Ponieważ etykieta jest powiązana z ukrytym checkboxem, pole wprowadzania będzie nadal aktualizowane, a wartość zostanie przesłana wraz z formularzem.

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

A jeśli jesteś zainteresowany, oto moje podejście do przycisków radiowych: http://jsfiddle.net/DtKrV/2/

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

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

Sztuczka polega na używaniu vertical-align tylko w komórkach tabeli lub inline-block, jeśli używasz znacznika etykiety.

Jeśli używasz Twittera Bootstrap, możesz po prostu użyć klasy checkbox na <label>:

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

Utwórz kod wysokości i szerokości pola wyboru, Usuń jego wypełnienie i ustaw jego wysokość wraz z pionowymi marginesami równymi wysokości linii etykiety. Jeśli tekst etykiety jest wbudowany, float pole wyboru. Firefox, Chrome i IE7 + renderują następujący przykład identycznie: http://www.kornea.com/css-checkbox-align

Z polem wyboru typu wejścia zawiniętym wewnątrz etykiety i unoszącym się po lewej stronie w ten sposób:

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

To mi pomogło:

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ść linii jest identyczna z wysokością linii (blocklevel) .

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Zwykle zostawiam pole wyboru bez etykiety, a następnie robię z niego" label " oddzielny element. To ból, ale jest tak duża różnica między przeglądarkami między tym, jak pola wyboru i ich etykiety są wyświetlane (jak zauważyłeś), że jest to jedyny sposób, w jaki mogę zbliżyć się do kontrolowania, jak wszystko wygląda.

I kończy się to w rozwoju winforms, z tego samego powodu. Myślę, że podstawowym problemem z kontrolką checkbox jest to, że są to naprawdę dwie różne kontrolki: pudełko i etykietę. Używając pola wyboru, pozostawiasz to do implementatorów kontrolki, aby zdecydować, w jaki sposób te dwa elementy są wyświetlane obok siebie (i zawsze się mylą, gdzie wrong = nie to, co chcesz).

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 trzech klasach i po prostu zmieni szerokości, aby pasowały.

Użyj po prostu vertical-align: sub, Jak pokrishka już zasugerował.

Fiddle

Kod HTML:

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

Kod CSS:

.checkboxes input {
    vertical-align: sub;
}

Więc wiem, że odpowiedź na to pytanie była wielokrotnie, ale czuję, że mam bardziej eleganckie rozwiązanie niż te, które zostały już dostarczone. I nie tylko 1 eleganckie rozwiązanie, ale 2 oddzielne rozwiązania do łaskotania fantazji. Z tym, że wszystko, co musisz wiedzieć i zobaczyć, zawarte jest w 2 JS Fiddle ' s, z komentarzami.

Rozwiązanie # 1 opiera się na natywnym "Checkboxie" danej przeglądarki, choć z pewnym zwrotem akcji... Jego zawarte w div, który jest łatwiejszy do pozycjonowania między przeglądarkami, z na przykład, jeśli nie jest to możliwe, to nie jest to możliwe.]}

Simple HTML: (Kliknij w link, aby przejrzeć css z komentarzami, blok kodu ma zaspokoić stackoverflow) http://jsfiddle.net/KQghJ/

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

Rozwiązanie # 2 używa "Checkbox Toggle Hack" do przełączania stanu CSS DIV, który został prawidłowo umieszczony w przeglądarce, i konfiguracji z prostym sprite dla checkbox niezaznaczony i sprawdzone Stany. Wszystko, co jest potrzebne, To dostosowanie pozycji tła z powiedział checkbox Przełącznik Hack. Moim zdaniem jest to bardziej eleganckie rozwiązanie, ponieważ masz większą kontrolę nad swoimi checkboxami i radiami i możesz zagwarantować, że wyglądają tak samo w całej przeglądarce.

Simple HTML: (Kliknij w link, aby przejrzeć CSS z komentarzami, blok kodu ma zaspokoić StackOverflow) http://jsfiddle.net/Sx5M2/

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

Yay dzięki! To też doprowadza mnie do szału od zawsze.

W moim konkretnym przypadku, to działało 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;
}

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

Powinieneś zawijać kontrolki formularzy zgrupowane we własnych polach tak czy inaczej, tutaj gra wrappa. Ustaw wejście / etykietę do wyświetlania: blok, wejście float w lewo, Etykieta float w prawo, Ustaw szerokości, odstępy sterujące z lewym / prawym marginesem, odpowiednio wyrównaj tekst etykiety.

Więc

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
}

Prawdopodobnie musisz ustawić obramowanie, kontur i wysokość linii zarówno dla rozwiązań między przeglądarkami/mediami.

position: relative; ma pewne problemy w IE Z z-index i animacje jak jQuery 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');
    }
});

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

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

Poniżej podano spójność pikseli w przeglądarkach, nawet w IE9:

1. Utwórz wejście i etykietę.
2. Wyświetl je jako blok, dzięki czemu można je unosić, jak chcesz.
3. Ustaw wysokość i wysokość linii na tę samą wartość, aby zapewnić ich wyśrodkowanie i wyrównanie w pionie.
4. dla em pomiary, aby obliczyć wysokość elementów, przeglądarka musi znać wysokość czcionki dla tych elementów i sama nie może być ustawiana w em measurements.

Wynika to z ogólnoświatowej zasady ogólnej:

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

Z możliwością dostosowania rozmiaru czcionki do formularza, zestawu pól lub elementu.

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

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

Ta metoda może mieć zastosowanie do wszystkich typów danych wejściowych, które nie są wyższe niż jeden wiersz tekstu. Apply a wpisz regułę, aby pasowała.