Вопрос: Как выровнять флажки и их ярлыки, последовательно перекрестные браузеры


Это одна из второстепенных проблем 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>

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


1491


источник


Ответы:


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

  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 ,

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

Что нужно отметить:

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

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


911



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


169



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

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>

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


152



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

input {
    vertical-align: -2px;
}

Справка


116



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

также кажется, что ваш код должен выглядеть так:

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


74



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


34



Единственное прекрасно подходящее решение для меня:

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

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


24



I usually use line height in order to adjust the vertical position of my static text:

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


16



I have not completely tested my solution, but it seems to work great.

My HTML is simply:

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

I then set all checkboxes to 24px for both height and width. To make the text aligned I make the label's line-height also 24px and assign vertical-align: top; like so:

EDIT: After IE testing I added vertical-align: bottom; to the input and changed the label's CSS. You may find you need a conditional IE css case to sort out padding - but the text and box are 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;
}

If anyone finds that this doesn't work, please kindly let me know. Here is it in action (in Chrome and IE - apologies as screenshots were taken on retina and using parallels for IE):

screenshot of checkboxes: Chrome screenshot of checkboxes: IE


12



I think this is the easiest way

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

Fiddle


9



This works well for me:

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>


9



I've never had a problem with doing it like this:

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

7