Выравнивание радио/флажка в HTML/CSS
Nitpicking: вы не указали стандарт.
Это источники, используемые для создания черновиков стандарта C ++. Эти источники не следует рассматривать как публикацию ИСО, а также документы, созданные из них, если они официально не приняты рабочей группой C ++ (ISO / IEC JTC1 / SC22 / WG21).
blockquote>Интерпретация: примечания не нормативный в соответствии с Директивами ISO / IEC, часть 2.
Примечания и примеры, включенные в текст документа, должны использоваться только для предоставления дополнительной информации, предназначенной для оказания помощи понимание или использование документа. Они не должны содержать требования («должны», см. 3.3.1 и таблицу H.1) или любую информацию, считающуюся необходимой для использования документа, например. инструкции (обязательно, см. таблицу H.1), рекомендации («следует», см. 3.3.2 и таблицу H.2) или разрешение («может», см. таблицу H.3). Заметки могут быть написаны как утверждение факта.
blockquote>Акцент мой. Это само по себе исключает «полный список вариантов». Однако приведение примеров относится к «дополнительной информации, предназначенной для содействия пониманию документа».
Имейте в виду, что «носовой демон» не должен восприниматься буквально, так же как использование воздушного шара, чтобы объяснить, как вселенная расширяет работу, не имеет правды в физической реальности. Это можно проиллюстрировать, что безрассудно обсуждать, что должно делать «неопределенное поведение», когда разрешено что-либо делать. Да, это означает, что в космическом пространстве нет реальной резиновой ленты.
4 ответа
Кажется, я наконец решил проблему. Одним из часто рекомендуемых решений является использование vertical-align: middle:
<input type="radio" style="vertical-align: middle"> Label
Проблема, однако, в том, что это по-прежнему вызывает видимые смещения, хотя теоретически должно работать. Спецификация CSS2 гласит, что:
vertical-align: middle: Выровняйте вертикальную среднюю точку блока с базовой линией родительского блока плюс половину x-высоты родительского блока.
Так что он должен быть в идеальный центр (x-height - высота символа x). Однако проблема, похоже, вызвана тем фактом, что браузеры обычно добавляют случайные неровные поля к переключателям и флажкам. Можно проверить, например, в Firefox с помощью Firebug, что поле флажка по умолчанию в Firefox составляет 3px 3px 0px 5px . Я не уверен, откуда это, но и в других браузерах поля, похоже, тоже совпадают. Итак, чтобы добиться идеального выравнивания, нужно избавиться от этих полей:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
Все же интересно отметить, что в решении на основе таблиц поля каким-то образом съедены, и все хорошо выравнивается.
Я не использовал бы таблицы для этого вообще. CSS может легко сделать это.
я сделал бы что-то вроде этого:
<p class="clearfix">
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</p>
p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }
Примечание: Я использовал clearfix класс от: http://www.positioniseverything.net/easyclearing.html
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Следующие работы в Firefox и Opera (извините, у меня нет доступа к другим браузерам в данный момент):
<div class="form-field">
<input id="option1" type="radio" name="opt"/>
<label for="option1">Option 1</label>
</div>
CSS:
.form-field * {
vertical-align: middle;
}
Это немного похоже на хитрость, но этот CSS, кажется, заставляет его работать очень хорошо во всех браузерах, так же, как при использовании таблиц (кроме Chrome).
input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=radio] { margin-top: -2px; }
}
Убедитесь, что вы используете ярлыки с вашими радиоприемниками, чтобы он работал. т.е.
<option> <label>My Radio</label>