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

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

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>

Hope, которая помогает.

попробуйте vertical-align: middle

, также Ваш код кажется, что это должно быть:

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

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

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

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

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

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

Попробуйте мое решение, я попробовал его в 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>

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

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>

Иногда вертикальный - выравнивают потребности два встроенных (промежуток, маркировка, вход, и т.д....) элементы друг рядом с другом для работы правильно. Следующие флажки правильно вертикально центрируются в 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>

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

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

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

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

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

Всего мои 2 цента.

Отделываясь решения Одного Мелка, у меня есть что-то, что работает на меня и более просто:

.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 в окнах со шрифтами 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>

С помощью флажков входного типа, завернутый внутри этикетки и плавал влево, так как:

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

Убедитесь, что высота идентична линии Высота (BloedLevel).

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

input {
    vertical-align: -2px;
}

Ссылка

input {
    margin: 0;
}

действительно помогает

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

vertical-align: middle

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