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




как выровнять radiobutton и текст по одной линии (20)

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

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


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>

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


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

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

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


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

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

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


Если вы используете веб-формы 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>

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


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


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

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

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


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

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>

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


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

input {
    vertical-align: -2px;
}

Reference


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


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

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

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

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

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

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

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

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


Просто хотел добавить к обсуждению атрибут «для» на ярлыках (слегка offtopic):

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

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

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

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


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

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

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


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


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

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>


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

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

Fiddle


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

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

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


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


input[type=checkbox]
{
    vertical-align: middle;
} 
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>


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

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





html-form