Это одна из мелких проблем CSS, которая постоянно мучает меня. Как люди вокруг Stack Overflow выровнены по вертикали checkboxesи labelsпостоянно кроссбраузерны ? Всякий раз, когда я корректно выравниваю их в Safari (обычно использую vertical-align: baselineна input), они полностью отключаются в Firefox и IE. Исправьте это в Firefox, и Safari и IE неизбежно испортятся. Я трачу время на это каждый раз, когда кодирую форму.

Вот стандартный код, с которым я работаю:

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

Я обычно использую сброс Эрика Мейера, поэтому элементы формы относительно чисты от переопределений. Ждем любых советов или хитростей, которые вы можете предложить!

После более чем часа настройки, тестирования и разметки разных стилей, я думаю, у меня может быть достойное решение. Требования для этого конкретного проекта были:

1. Входы должны быть на своей линии.
2. Входные данные флажков должны быть выровнены вертикально с текстом метки одинаково (если не одинаково) во всех браузерах.
3. Если текст метки переносится, он должен быть с отступом (поэтому не ставить его под флажок).

Прежде чем я приведу какое-либо объяснение, я просто дам вам код:

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>

Вот рабочий пример в JSFiddle .

В этом коде предполагается, что вы используете сброс, такой как Эрик Майер, который не переопределяет поля ввода формы и отступы (следовательно, вводит сброс полей и отступов во входном CSS). Очевидно, что в реальной среде вы, вероятно, будете вкладывать / переопределять материал для поддержки других элементов ввода, но я хотел, чтобы все было просто.

Что следует отметить:

• *overflowДекларация является встроенный IE хак (звезда-недвижимость хак). И IE 6 и 7 заметят это, но Safari и Firefox будут правильно игнорировать это. Я думаю, что это может быть действительный CSS, но вам все же лучше с условными комментариями; просто использовал это для простоты.
• Насколько я могу судить, единственное vertical-alignутверждение, которое было одинаковым во всех браузерах, было vertical-align: bottom. Установка этого и затем относительного позиционирования вверх в Safari, Firefox и IE вела себя почти одинаково с разницей в один или два пикселя.
• Основная проблема в работе с выравниванием заключается в том, что IE накапливает загадочное пространство вокруг элементов ввода. Это не отступы или отступы, и это чертовски настойчиво. Установка ширины и высоты для флажка, а затем overflow: hiddenпо какой-то причине отсекает дополнительное пространство и позволяет позиционированию IE действовать очень похоже на Safari и Firefox.
• В зависимости от размера текста, вам, без сомнения, потребуется настроить относительное положение, ширину, высоту и т. Д., Чтобы все выглядело правильно.

Надеюсь, это поможет кому-то еще! Я не пробовал эту конкретную технику на каких-либо проектах, кроме тех, над которыми я работал этим утром, поэтому определенно подготовьтесь, если найдете что-то, что работает более последовательно.

Иногда для вертикального выравнивания требуются два встроенных элемента (span, label, input и т. Д.) Рядом друг с другом для правильной работы. Следующие флажки правильно отцентрированы по вертикали в IE, Safari, FF и Chrome, даже если размер текста очень маленький или большой.

Все они плавают рядом друг с другом в одной строке, но nowrap означает, что весь текст метки всегда остается рядом с флажком.

Недостатком являются дополнительные бессмысленные теги 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>

Теперь, если бы у вас был очень длинный текст метки, который нужно было переносить без переноса под флажком, вы бы использовали отступы и отступ для отрицательного текста на элементах метки:

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

Работая над решением One Crayon , у меня есть кое-что, что работает для меня и проще:

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

Отрисовывает пиксель за пикселем то же самое в Safari (базовый уровень которого я доверяю), и Firefox и IE7 проверяются как хорошие. Он также работает для шрифтов различных размеров, больших и маленьких. Теперь для исправления базовой линии IE на выборках и входах ...

Обновление: (стороннее редактирование)

Правильная bottomпозиция зависит от семейства шрифтов и размера шрифта! Я нашел использование bottom: .08em;for checkbox & radio elements - хорошая общая ценность. Я протестировал его в Chrome / Firefox / IE11 в Windows со шрифтами Arial и Calibri, используя несколько маленьких / средних / больших шрифтов.

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

Одна простая вещь, которая, кажется, работает хорошо, состоит в том, чтобы применить корректировку вертикального положения флажка с вертикальным выравниванием. Это будет по-разному в разных браузерах, но решение несложное.

input {
    vertical-align: -2px;
}

Ссылка

пытаться vertical-align: middle

также ваш код выглядит так:

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

Попробуйте мое решение, я попробовал его в IE 6, FF2 и Chrome, и он рендерит пиксель за пикселем во всех трех браузерах.

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

Единственное идеально работающее решение для меня:

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

Протестировано сегодня в Chrome, Firefox, Opera, IE 7 и 8. Пример: Fiddle

Я не полностью проверил свое решение, но, похоже, оно работает отлично.

Мой HTML просто:

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

Затем я установил все флажки 24pxдля высоты и ширины. Для того, чтобы текст выровнен я сделать ярлык это line-heightтакже 24pxи правопреемником vertical-align: top;следующим образом:

РЕДАКТИРОВАТЬ: После тестирования IE я добавил vertical-align: bottom;на вход и изменил CSS метки. Возможно, вам понадобится условный регистр IE css для сортировки заполнения, но текст и поле встроены.

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>

Если кто-нибудь обнаружит, что это не работает, пожалуйста, дайте мне знать. Вот оно в действии (в Chrome и IE - извинения за то, что скриншоты были сделаны на сетчатке и с использованием параллелей для IE):

Я обычно использую высоту строки, чтобы отрегулировать вертикальное положение моего статического текста:

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>

Надеюсь, это поможет.

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

Хитрость заключается в том, чтобы использовать вертикальное выравнивание только в ячейках таблицы или встроенном блоке, если используется тег label.

Давайте наконец посмотрим на источник проблемы

Флажки отображаются с помощью изображений (можно установить пользовательские с помощью CSS). Вот (не отмеченный) флажок в FireFox, выделенный инспектором DOM:

И вот такой же неустановленный флажок в Chrome:

Вы можете увидеть поле (оранжевый); отступа нет (будет показано зеленым). Так что же это за псевдо-поле справа и снизу флажка? Это части изображения, используемые для флажка . Вот почему с помощью простоvertical-align: middle не достаточно, и это является источником кросс-браузерных проблем.

Так что мы можем с этим поделать?

Один очевидный вариант - заменить изображения! К счастью, это можно сделать с помощью CSS и заменить их внешними изображениями, изображениями base64 (in-CSS), SVG в CSS или просто псевдоэлементами. Это надежный (кросс-браузерный!) Подход, и вот пример такой настройки, украденной из этого вопроса :

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

Возможно, вы захотите прочитать более подробные статьи о таком стиле, как некоторые из перечисленных здесь ; это выходит за рамки этого ответа.

Хорошо, все же, что насчет решения «нет пользовательских изображений или псевдоэлементов»?

TL; DR: похоже, это не сработает, вместо этого используйте пользовательский флажок

Во-первых, давайте заметим, что если в других браузерах эти псевдо-поля внутри значка флажка были произвольными, единого решения не было. Чтобы создать его, мы должны изучить анатомию таких изображений в существующих браузерах.

Итак, какие браузеры имеют псевдо-поля в флажках? Я проверил Chrome 75, Vivaldi 2.5 (на основе хрома), FireFox 54 (не спрашивайте, почему такие устаревшие), IE 11, Edge 42, Safari ?? (одолжил одну на минуту, забыл проверить версию). Только Chrome и Vivaldi имеют такие псевдо-поля (я подозреваю, что все браузеры на основе Chromium, такие как Opera).

Каков размер этих псевдо-полей? Чтобы понять это, можно использовать увеличенный флажок:

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

<input type=checkbox>

мой результат составляет ~ 7% от ширины / высоты и, следовательно, 0,9-1,0px в абсолютных единицах. Точность может быть поставлена ​​под сомнение, хотя: попробуйте различные значения zoomдля флажка. В моих тестах как в Chrome, так и в Vivaldi относительный размер псевдо-поля сильно различался при zoomзначениях 10, 20 и 11–19 (??):

scale кажется более последовательным:

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

<input type=checkbox>

поэтому, вероятно, ~ 14% и 2px - правильные значения.

Теперь, когда мы знаем (?) Размер псевдо-поля, отметим, что этого недостаточно. Являются ли размеры значков флажков одинаковыми для всех браузеров? Увы! Вот что показывает инспектор DOM для неустановленных флажков:

• FireFox: 13,3 пикселей
• На основе хрома: 12,8 пикселя в целом, следовательно, 12,8 (100% - 14%) = 11 пикселей для того, что визуально воспринимается как флажок
• IE 11, Edge: 13px
• Safari: н / д (я думаю, их следует сравнивать на одном экране)

Теперь, прежде чем обсуждать какие-либо решения или хитрости, давайте спросим: что является правильным выравнивание? Чего мы пытаемся достичь? До определенного момента это дело вкуса, но в основном я могу думать о следующих «хороших» аспектах выравниваний:

текст и флажок на одной и той же базовой линии (я специально не настраиваю здесь размер флажка):

или иметь одинаковую среднюю строку в терминах строчных букв:

или та же средняя строка с точки зрения заглавных букв (легче увидеть разницу для разного размера шрифта):

а также мы должны решить, должен ли размер флажка быть равен высоте строчной буквы, заглавной буквы или чего-то еще (больше, меньше или между строчной и заглавной буквой).

Для этого обсуждения давайте назовем выравнивание хорошим, если флажок находится на той же базовой линии, что и текст, и имеет размер заглавной буквы (весьма спорный выбор):

Теперь, какие инструменты мы должны:

1. настроить размер флажка
2. распознает Chromium с его псевдо-маргинальным флажком и устанавливает определенные стили
3. настроить флажок / метка вертикальное выравнивание

?

1. Что касается корректировки размера флажка : есть width, height, size, zoom, scale(у меня что - то пропустил?). zoomи scaleне разрешают устанавливать абсолютный размер, поэтому они могут помочь только в адаптации к размеру текста, но не в кросс-браузерном размере (если мы не можем написать правила для браузера). sizeне работает с Chrome (он работал со старым IE? в любом случае, это не так интересно). widthа такжеheight работать в Chrome и других браузерах, поэтому мы можем установить общий размер, но опять же, в Chrome он устанавливает размер всего изображения, а не сам флажок. Примечание: это минимум (ширина, высота), который определяет размер флажка (если ширина ≠ высота, область вне квадрата флажка добавляется к «псевдо-полям»).

   К сожалению, псевдо-поля в Chrome не установлены на ноль для любой ширины и высоты, насколько я вижу.

2. Боюсь, в наши дни не существует надежного метода только для CSS .

3. Давайте рассмотрим вертикальное выравнивание. vertical-alignне может дать согласованные результаты, когда установлено middleили baselineиз-за псевдо-поля Chrome, единственная реальная возможность получить одинаковую «систему координат» для всех браузеров - это выровнять метку и ввести в top:

   

   (на картинке: выравнивание по вертикали: верх, низ и низ без тени)

Так какой результат мы получаем от этого?

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

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

Приведенный выше фрагмент кода работает с Chrome (браузеры на основе Chromium), но для других браузеров требуется меньший размер флажка. Кажется невозможным отрегулировать как размер, так и вертикальное выравнивание таким образом, чтобы обойти причуду изображения в Chromium. Мое последнее предложение: используйте вместо этого пользовательские флажки - и вы избежите разочарования :)

Теперь, когда flexbox поддерживается во всех современных браузерах, что-то вроде этого кажется мне более простым подходом.

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

Вот полная демонстрационная версия с префиксом:

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>

Я думаю, что это самый простой способ

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

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

Мне не нравится относительное позиционирование, потому что оно делает элемент визуализированным над всем остальным на своем уровне (он может попасть поверх чего-либо, если у вас сложный макет).

Я обнаружил, что vertical-align: subфлажки выглядят достаточно хорошо выровненными в Chrome, Firefox и Opera. Не могу проверить Safari, так как у меня нет MacOS и IE10 немного отключен, но я нашел, что это достаточно хорошее решение для меня.

Другое решение может заключаться в том, чтобы попытаться создать конкретный CSS для каждого браузера и настроить его с помощью вертикального выравнивания в% / пикселях / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Это хорошо работает для меня:

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>

Выбранный ответ с более чем 400 ответами не работал для меня в Chrome 28 OSX, возможно, потому, что он не был протестирован в OSX или что он работал в любом месте в 2008 году, когда на этот вопрос был дан ответ.

Времена изменились, и теперь возможны новые решения CSS3. Мое решение использует псевдоэлементы для создания собственного флажка . Таким образом, условия (плюсы или минусы, как ни крути) таковы:

• Работает только в современных браузерах (FF3.6 +, IE9 +, Chrome, Safari)
• Полагается на специально разработанный флажок, который будет отображаться одинаково в каждом браузере / ОС. Здесь я только что выбрал несколько простых цветов, но вы всегда можете добавить линейные градиенты и тому подобное, чтобы придать ему больше удовольствия.
• Приспособлен к определенному шрифту / размеру шрифта, который, если изменить, вы просто изменили бы расположение и размер флажка, чтобы он выглядел вертикально выровненным. При правильной настройке конечный результат должен быть почти одинаковым во всех браузерах / операционных системах.
• Нет свойств вертикального выравнивания, нет поплавков
• Нужно использовать предоставленную разметку в моем примере, она не будет работать, если структурирована, как вопрос, однако, макет по существу будет выглядеть одинаково. Если вы хотите переместить вещи, вам также нужно будет переместить связанный 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>

Это решение скрывает флажок и добавляет и накладывает стили псевдоэлементов на метку, чтобы создать видимый флажок. Поскольку метка привязана к скрытому флажку, поле ввода все равно будет обновлено, а значение будет отправлено вместе с формой.

И если вам интересно, вот мое мнение о переключателях: http://jsfiddle.net/DtKrV/2/

Надеюсь, кто-то найдет это полезным!

У меня никогда не было проблем с этим:

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

Если вы используете ASP.NET Web Forms, вам не нужно беспокоиться о DIV и других элементах или фиксированных размерах. Мы можем выровнять <asp:CheckBoxList>текст, установив float:leftтип ввода CheckboxList в CSS.

Пожалуйста, проверьте следующий пример кода:

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

.ASPX код:

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

Если вы используете Twitter Bootstrap, вы можете просто использовать checkboxкласс на <label>:

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

С флажком типа ввода, обернутым внутри метки и смещенным влево, вот так:

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

это сработало для меня:

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

Убедитесь, что высота равна высоте строки (уровень блока).

Жестко закодируйте высоту и ширину флажка, удалите его отступы и сделайте его высоту плюс вертикальные поля равными высоте строки метки. Если текст метки встроен, установите флажок. Firefox, Chrome и IE7 + одинаково отображают следующий пример: http://www.kornea.com/css-checkbox-align

Я обычно оставляю флажок без метки, а затем делаю его «метку» отдельным элементом. Это больно, но между браузерами так много различий в том, как отображаются флажки и их метки (как вы заметили), что это единственный способ приблизиться к контролю того, как все выглядит.

Я также заканчиваю тем, что делал это в разработке winforms по той же причине. Я думаю, что основная проблема с элементом управления checkbox заключается в том, что это действительно два разных элемента управления: поле и метка. Используя флажок, вы оставляете на усмотрение разработчиков элемента управления решать, как эти два элемента отображаются рядом друг с другом (и они всегда ошибаются, где неправильно = не то, что вы хотите).

Я действительно надеюсь, что у кого-то есть лучший ответ на ваш вопрос.

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>

Приведенный выше код поместит элементы списка в три протокола и просто изменит ширину в соответствии с вашими требованиями.

Следующее обеспечивает безупречную согласованность между браузерами, даже IE9:

Подход довольно разумный, до такой степени очевидный:

1. Создайте вход и метку.
2. Отобразите их как блок, чтобы вы могли плавать их, как вам нравится.
3. Установите высоту и высоту строки в одно и то же значение, чтобы обеспечить их центрирование и выравнивание по вертикали.
4. Для измерений em , чтобы вычислить высоту элементов, браузер должен знать высоту шрифта для этих элементов, и он не должен сам устанавливаться в измерениях em.

Это приводит к общему применимому общему правилу:

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

С размером шрифта адаптируется для формы, набора полей или элемента.

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

Протестировано в последних версиях Chrome, Safari и Firefox для Mac, Windows, Iphone и Android. И IE9.

Этот метод, вероятно, применим ко всем типам ввода, которые не превышают одну строку текста. Примените правило типа, чтобы удовлетворить.

Поэтому я знаю, что на это уже много раз отвечали, но я чувствую, что у меня есть более элегантное решение, чем те, которые уже были предоставлены. И не только 1 элегантное решение, но и 2 отдельных решения для щекотки. С учетом всего сказанного, все, что вам нужно знать и видеть, содержится в 2 JS Fiddle's с комментариями.

Решение № 1 опирается на собственный «флажок» данного браузера, хотя и с изюминкой ... Он содержится в элементе div, который легче позиционировать в кросс-браузерном режиме, с переполнением: скрыт, чтобы отбросить избыток растянутого флажка на 1 пиксель (это так, что вы не можете видеть уродливые границы FF)

Простой HTML: (перейдите по ссылке, чтобы просмотреть css с комментариями, кодовый блок предназначен для удовлетворения стекового потока) http://jsfiddle.net/KQghJ/

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

Решение № 2 использует «Переключатель флажков», чтобы переключать состояние CSS DIV, который был правильно расположен в браузере, и настраивается с помощью простого спрайта для состояний флажков, не отмеченных и отмеченных. Все, что нужно, это отрегулировать положение фона с помощью указанного флажка Toggle Hack. Это, на мой взгляд, более элегантное решение, поскольку у вас больше контроля над флажками и радио, и вы можете гарантировать, что они выглядят одинаково в браузере.

Простой HTML: (перейдите по ссылке, чтобы просмотреть CSS с комментариями, блок кода должен удовлетворить StackOverflow) http://jsfiddle.net/Sx5M2/

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

Если кто-то не согласен с этими методами, пожалуйста, оставьте мне комментарий, я хотел бы услышать некоторые отзывы о том, почему другие не сталкивались с этими решениями, или, если они есть, почему я не вижу здесь ответов относительно них? Если кто-то увидит, что один из этих методов потерпел неудачу, было бы неплохо это увидеть, но они были протестированы в последних браузерах и полагаются на методы HTML / CSS, которые являются довольно старыми и универсальными, насколько я видел.

Yay спасибо! Это тоже сводило меня с ума навсегда.

В моем конкретном случае это сработало для меня:

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

Я использую reset.css, который может объяснить некоторые различия, но мне кажется, что это хорошо работает.

position: relative; имеет некоторые проблемы в IE с z-index и анимациями, такими как slideQp / 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');
    }
});

Стиль, вероятно, нуждается в настройках в зависимости от размера шрифта, используемого в <label>

PS:
я использую ie7js, чтобы заставить css работать в IE6.

Использовать просто vertical-align: sub, так как покришка уже предложена.

скрипка

HTML-код:

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

Код CSS:

.checkboxes input {
    vertical-align: sub;
}

Простое решение:

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

Протестировано в Chrome, Firefox, IE9 +, Safari, iOS 9+