Как совместить флажки и их метки последовательно в кросс-браузерах

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

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

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

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

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

Работая над решением 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; для флажка и радиоэлементов это хорошая общая ценность. Я тестировал его в 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

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

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>

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

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

Мой HTML-код просто:

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

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

EDIT: После тестирования 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;
}

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

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

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

Fiddle

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

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>

Теперь, когда 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>

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

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

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

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

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

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

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

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

Ваш HTML:

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

Ваш 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;
}

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

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

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

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

Если вы используете Веб-формы ASP.NET, вам не нужно беспокоиться о 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>

Просто хотел добавить к обсуждению атрибут "для" на ярлыках (слегка оффтопный):

Пожалуйста, поставьте его, даже если это не обязательно, потому что он очень удобно использовать из javascript:

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

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

Только мои 2 цента.

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

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

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

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

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

Используйте просто vertical-align: sub, поскольку pokrishka уже предложил.

Fiddle

Код HTML:

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

Код CSS:

.checkboxes input {
    vertical-align: sub;
}

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

Ниже приведена четкая согласованность пикселей между браузерами, даже IE9:

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

• Создайте ввод и метку.
• Покажите их как блок, чтобы вы могли плавать по своему усмотрению.
• Установите высоту и высоту линии на одно и то же значение, чтобы обеспечить их центрирование и выравнивание по вертикали.
• Для измерений 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.

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

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

В любом случае вы должны обертывать элементы управления, сгруппированные в свои собственные поля, здесь он играет в wrappa. set input/label do display: block, input float left, label float right, установить ширину, расстояние между командами с левым/правым краем, соответствующим образом выровнять текст метки.

так

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
}

вам, вероятно, необходимо установить границы, контуры и линейную высоту как для кросс-браузерных, так и для мультимедийных решений.

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

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

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

Благодарю! Это тоже заводило меня навсегда.

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

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, который может объяснить некоторые различия, но это, похоже, хорошо работает для меня.

Я нашел единственный способ выстроить их в ряд, используя абсолютную позицию для ввода. Игра с входной переменной top дала желаемый результат.

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

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

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

Возможно, некоторые люди совершают ту же ошибку, что и я? Который был... Я установил ширину для полей ввода, потому что они были в основном типа "текст", но затем забывали перетащить эту ширину для флажков, поэтому мой флажок пытался занять большую избыточную ширину и поэтому было сложно выровнять ярлык рядом с ним.

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

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

Дает ярлыки с надписями и правильное выравнивание еще в IE6 (с помощью селектора классов) и в поздних версиях Firefox, Safari и Chrome

Это не лучший способ решить проблему.

vertical-align: middle

Добавление style="position:relative;top:2px;" в поле ввода приведет к его перемещению вниз 2px. Поэтому в зависимости от размера шрифта вы можете перемещать его.

попробуйте этот код

input[type="checkbox"] {
    -moz-appearance: checkbox;
    -webkit-appearance: checkbox;
    margin-left:3px;
    border:0;
    vertical-align: middle;
    top: -1px;
    bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    background: #fff;
}

Я обнаружил один способ сделать это, который дает тот же результат почти во всех браузерах. По крайней мере, современные браузеры. Он работает в Firefox, Chrome, Safari, Opera. В IE это будет выглядеть почти так, как если бы не было правил, применяемых для входов или меток (т.е. Все равно будет иметь метку в несколько пикселей ниже), поэтому я думаю, что это простительно.

HTML

<label class="boxfix"><input type="radio">Label</label>

CSS

.boxfix {
    vertical-align: bottom;
}
.boxfix input {
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
}

Для согласованности с полями форм в браузерах мы используем: размер окна: border-box

button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input {
    margin: 0;
}

действительно делает трюк