Как последовательно выровнять флажки и их метки в разных браузерах
-
08-07-2019 - |
Вопрос
Это одна из незначительных проблем 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>
Обычно я использую reset Эрика Мейера, поэтому элементы формы относительно чисты от переопределений.С нетерпением ждем любых советов или хитростей, которые вы можете предложить!
Решение
После более чем часа настройки, тестирования и пробы различных стилей разметки, я думаю, у меня может получиться достойное решение.Требования к этому конкретному проекту были следующими:
- Входные данные должны быть на их собственной линии.
- Входные данные флажка должны совпадать по вертикали с текстом метки аналогичным образом (если не идентично) во всех браузерах.
- Если текст метки переносится, у него должен быть отступ (поэтому не переносите его вниз под флажком).
Прежде чем я перейду к каким-либо объяснениям, я просто дам вам код:
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's, который не переопределяет поля ввода формы и отступы (следовательно, поля и отступы сбрасываются во входном CSS).Очевидно, что в живой среде вы, вероятно, будете вкладывать / переопределять материал для поддержки других элементов ввода, но я хотел, чтобы все было просто.
На что следует обратить внимание:
- В
*overflow
объявление - это встроенный взлом IE (взлом star-property).И IE 6, и 7 заметят это, но Safari и Firefox должным образом проигнорируют это.Я думаю, что это может быть допустимый CSS, но вам все равно лучше использовать условные комментарии;просто использовал его для простоты. - Насколько я могу судить, единственный
vertical-align
утверждение, которое было согласовано во всех браузерах, былоvertical-align: bottom
.Установка этого параметра, а затем относительное позиционирование вверх вели себя почти идентично в Safari, Firefox и IE с расхождением всего в один-два пикселя. - Основная проблема в работе с выравниванием заключается в том, что IE вставляет кучу загадочных пробелов вокруг входных элементов.Это не отступ или поля, и это чертовски настойчиво.Устанавливаем ширину и высоту флажка, а затем
overflow: hidden
по какой-то причине сокращается дополнительное пространство и позволяет позиционированию IE действовать очень похоже на Safari и Firefox. - В зависимости от размера вашего текста вам, несомненно, потребуется отрегулировать относительное расположение, ширину, высоту и так Далее, Чтобы все выглядело правильно.
Надеюсь, это поможет кому-то еще!Я не пробовал эту специфическую технику ни в каких проектах, кроме того, над которым я работал этим утром, так что обязательно подключайтесь, если найдете что-то, что работает более стабильно.
Другие советы
Иногда для правильной работы vertical-align требуются два встроенных элемента (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>
Теперь, если бы у вас был очень длинный текст метки, который необходимый чтобы выполнить перенос без переноса под флажком, вы бы использовали отступы и отрицательный текстовый отступ на элементах label:
.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>
Отработка Решение одного карандаша, У меня есть кое - что , что работает для меня и проще:
.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, используя несколько размеров шрифта small / mid / large.
.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>
Одна простая вещь, которая, кажется, работает хорошо, - это применить настройку вертикального положения флажка с помощью vertical-align.Это по-прежнему будет отличаться в разных браузерах, но решение несложное.
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.Пример: Скрипка
Обычно я использую высоту строки, чтобы отрегулировать вертикальное положение моего статического текста:
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;
вот так:
Редактировать: После тестирования 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 - приношу извинения, поскольку скриншоты были сделаны на retina и с использованием parallels для IE):
Я думаю, что это самый простой способ
input {
position: relative;
top: 1px;
}
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
<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>
Мне не нравится относительное позиционирование, потому что оно делает элемент визуализируемым выше всего остального на своем уровне (он может оказаться поверх чего-либо, если у вас сложный макет).
Я обнаружил, что vertical-align: sub
делает флажки достаточно хорошо выровненными в Chrome, Firefox и Opera.Не могу проверить Safari, так как у меня нет macOS, а IE10 немного отключен, но я нашел, что это достаточно хорошее решение для меня.
Другим решением может быть попытка создать определенный CSS для каждого браузера и точно настроить его с некоторым выравниванием по вертикали в % / пикселях / EMs:http://css-tricks.com/snippets/css/browser-specific-hacks/
Теперь, когда 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>
У меня никогда не было проблем с тем, чтобы делать это вот так:
<form>
<div>
<input type="checkbox" id="cb" /> <label for="cb">Label text</label>
</div>
</form>
Просто хотел добавить к обсуждению атрибута 'for' на ярлыках (слегка оффтопичный):
Пожалуйста, предоставляйте его, даже если в этом нет необходимости, потому что его очень удобно использовать из javascript:
var label = ...
var input = document.getElementById(label.htmlFor);
Это намного удобнее, чем пытаться выяснить, вложен ли ввод в метку, или ввод перед меткой, или после..и т.д.И никогда не помешает снабдить его..итак.
Только мои 2 цента.
Если вы используете ASP.NET Веб - формы вам не нужно беспокоиться о DIVs и других элементах или фиксированных размерах.Мы можем выровнять <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>
Выбранный ответ с более чем 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/
Надеюсь, кто-нибудь найдет это полезным!
Если вы используете Twitter Bootstrap, вы можете просто использовать checkbox
класс по <label>
:
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
Жестко задайте высоту и ширину флажка, удалите его отступы и сделайте его высоту плюс вертикальные поля равными высоте строки метки.Если текст метки является встроенным, установите флажок.Firefox, Chrome и IE7+ одинаково отображают следующий пример: http://www.kornea.com/css-checkbox-align
<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.
С флажком типа ввода, обернутым внутри метки и перемещенным влево вот так:
<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;
}
Убедитесь, что высота элемента идентична высоте строки (blocklevel) .
input[type=checkbox]
{
vertical-align: middle;
}
<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>
Давайте, наконец, взглянем на источник проблемы
Флажки отображаются с использованием изображений (можно установить пользовательские с помощью CSS).Вот (снятый) флажок в FireFox, выделенный с помощью DOM inspector:
И вот такой же нестайлинговый флажок в Chrome:
Вы можете видеть поля (оранжевые);заполнение отсутствует (будет отображаться зеленым цветом).Итак, что это за псевдополе справа и внизу флажка? Это части изображения, используемого для флажка.Вот почему использование просто vertical-align: middle
на самом деле этого недостаточно, и это источник кроссбраузерных проблем.
Итак, что мы можем с этим сделать?
Один из очевидных вариантов – заменить изображения!К счастью, это можно сделать с помощью CSS и заменить их внешними изображениями, изображениями base64 (в 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 (на базе Chromium), 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,0 пикселя в абсолютных единицах.Однако точность может быть поставлена под сомнение:попробуйте разные значения 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% и 2 пикселя - это правильные значения.
Теперь, когда мы знаем (?) размер псевдополя, давайте отметим, что этого недостаточно.Одинаковы ли размеры значков флажков для всех браузеров?Увы!Вот что показывает DOM inspector для нестайлинговых флажков:
- FireFox: 13.3 пикселей
- На основе хрома: 12,8 пикселей для всего этого, следовательно, 12,8 (100% - 14%) = 11 пикселей для того, что визуально воспринимается как флажок
- IE 11, Край: 13 пикселей
- Сафари:n / a (я полагаю, их следует сравнивать на одном экране)
Теперь, прежде чем мы обсудим какие-либо решения или хитрости, давайте спросим:что такое правильный выравнивание?Чего мы пытаемся достичь?В какой-то момент это дело вкуса, но в принципе я могу вспомнить следующие аспекты "приятных" выравниваний:
текст и флажок на одной базовой линии (я намеренно не настраиваю здесь размер флажка):
или иметь ту же среднюю строку в виде строчных букв:
или одна и та же средняя строка с точки зрения заглавных букв (так легче увидеть разницу при разном размере шрифта):
а также мы должны решить, должен ли размер флажка быть равен высоте строчной буквы, заглавной буквы или чего-то другого (большего, меньшего или между строчными и прописными).
Для этого обсуждения давайте назовем выравнивание хорошим, если флажок находится на той же базовой линии, что и текст, и имеет размер заглавной буквы (весьма спорный выбор).:
Итак, какими инструментами мы располагаем для:
- отрегулируйте размер флажка
- распознайте Chromium с его псевдополевым флажком и установите определенные стили
- отрегулируйте выравнивание флажка / метки по вертикали
?
Что касается настройка размера флажка:есть такие
width
,height
,size
,zoom
,scale
(я что-то пропустил?).zoom
иscale
не разрешайте устанавливать абсолютный размер, поэтому они могут помочь только с настройкой размера текста, а не с установкой кроссбраузерного размера (если только мы не можем написать правила для конкретного браузера).size
не работает с Chrome (работало ли это со старым IE?в любом случае, это не так уж интересно).width
иheight
работает в Chrome и других браузерах, поэтому мы можем установить общий размер, но опять же, в Chrome он устанавливает размер всего изображения, а не самого флажка.Примечание:это минимум (ширина, высота), который определяет размер флажка (если ширина ≠ высота, область за пределами квадрата флажка добавляется к "псевдополю").К сожалению, флажок псевдополя в Chrome не установлен на ноль для любой ширины и высоты, насколько я могу видеть.
Я боюсь, что нет надежного Метод только для CSS в наши дни.
Давайте рассмотрим вертикальное выравнивание.
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 с флажками. Мое последнее предложение таково:используйте вместо этого пользовательские флажки – и вы избежите разочарования :)
Обычно я оставляю флажок немаркированным, а затем делаю его "метку" отдельным элементом.Это неприятно, но между тем, как отображаются флажки и их метки (как вы заметили), существует такая большая межбраузерная разница, что это единственный способ приблизиться к контролю того, как все выглядит.
Я также заканчиваю тем, что делаю это при разработке 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>
Приведенный выше код разместит элементы вашего списка в threecols и просто изменит ширину по своему усмотрению.
Следующее обеспечивает идеальную согласованность пикселей во всех браузерах, даже в IE9:
Подход вполне разумный, вплоть до очевидности:
- Создайте входные данные и метку.
- Отобразите их в виде блоков, чтобы вы могли перемещать их по своему усмотрению.
- Установите для height и line-height одинаковое значение, чтобы убедиться, что они расположены по центру и выровнены по вертикали.
- Для em измерения, чтобы вычислить высоту элементов, браузер должен знать высоту шрифта для этих элементов, и она не должна сама устанавливаться в em measurements.
Это приводит к глобально применимому общему правилу:
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 с комментариями.
Решение № 1 опирается на собственный "Флажок" данного браузера, хотя и с изюминкой...Он содержится в div, который легче позиционировать в кроссбраузерном режиме, с переполнением:скрыт, чтобы обрезать излишки растянутого в 1 пиксель флажка (это для того, чтобы вы не могли видеть уродливые границы FF)
Простой HTML: (перейдите по ссылке, чтобы просмотреть css с комментариями, блок кода предназначен для удовлетворения stackoverflow) http://jsfiddle.net/KQghJ/
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>
Решение № 2 использует "Checkbox Toggle Hack" для переключения состояния CSS DIV, которое было правильно расположено в браузере, и настройки с помощью простого спрайта для состояний checkbox unchecked и checked.Все, что нужно, это отрегулировать положение фона с помощью указанного взлома переключения флажков.Это, на мой взгляд, более элегантное решение, поскольку у вас больше контроля над вашими флажками и радиоприемниками, и вы можете гарантировать, что они выглядят одинаково во всех браузерах.
Простой HTML: (перейдите по ссылке, чтобы просмотреть CSS с комментариями, блок кода предназначен для удовлетворения StackOverflow) http://jsfiddle.net/Sx5M2/
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>
Если кто-то не согласен с этими методами, пожалуйста, оставьте мне комментарий, я хотел бы услышать отзывы о том, почему другие не сталкивались с этими решениями, или, если сталкивались, почему я не вижу здесь ответов относительно них?Если кто-нибудь увидит, что один из этих методов терпит неудачу, было бы приятно увидеть и это, но они были протестированы в новейших браузерах и основаны на методах HTML / CSS, которые довольно старые и универсальные, насколько я видел.
Ура, спасибо!Это тоже всегда сводило меня с ума.
В моем конкретном случае это сработало для меня:
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 и анимациями, такими как 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 - 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.