Как выровнять radio-button и текст по одной линии?

2010-04-27

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

Конечно можно всё вставлять в ячейки таблицы или плодить бесконечную глубину блоков для получения идеального варианта для всех браузеров, но можно сделать проще:

<input
type="radio"
name="answer"
value="yes"
style="vertical-align:middle;"
/>
<span style="vertical-align:middle;">Да</span>
<input
type="radio"
name="answer"
value="no"
style="vertical-align:middle;"
/>
<span style="vertical-align:middle;">Нет</span>

В данном примере был применен стиль vertical-align:middle; как для самих кнопок выбора, так и для текста, которых находится рядом.
Все элементы находятся в одной строке и имеют значение свойства display равным inline, что является значением по умолчанию во всех браузерах.

Удачной Вам верстки!



2 комментария на «Как выровнять radio-button и текст по одной линии?»

  1. Василий:

    Не работает

  2. Алекс:

    Спасибо!

Добавить комментарий