Совместите переключатель с соответствующей меткой

Question

Я использую элемент управления списком переключателей ASP.NET.

Генерирует следующий HTML.

        <table>
            <tr>
                <td>
                    <input type="radio"/>
                    <label >
                        label 1</label>
                </td>
                <td>
                    <input  type="radio" 
                        value="False" checked="checked" />
                    <label >
                        label 2</label></td>                   
            </tr>
        </table>

Пока все выглядит хорошо (по крайней мере, для пользователя), метки выровнены с переключателями.

Однако, когда я изменяю размер шрифта, скажем, 10px, размер метки, очевидно, выглядит меньше, но побочным эффектом этого является то, что метка также выглядит как выровненная по нижней части переключателя. Мне нужно, чтобы ярлык был расположен по центру переключателя.

Я смог сделать это в IE со следующим css:

  <style type="text/css">
    label
    {
        font-size:10px; 
        line-height:12px;
        vertical-align:middle;
    } 
</style>

Однако это не работает в Firefox или Chrome

Есть предложения?

Answer 1

Вместо этого:

label {
  font-size: 10px;
  line-height: 12px;
  vertical-align: middle;
}

попробуйте это:

label, input[type="radio"] {
  font-size: 10px;
  vertical-align: middle;
}

Answer 2

Этот селектор атрибута не будет работать в IE6 - самый безболезненный метод, который я нашел, - это добавить класс 'radio' к вашим радио-кнопкам, чтобы CSS стал:

label, input.radio{
  font-size:10px; 
  vertical-align:middle;
}

Конечно, таблица не является правильной разметкой для такого рода форм - лично я предпочитаю список определений с метками внутри DT и входными данными в DD. Семантически это нормально, на мой взгляд - вы показываете список терминов (метки), которые пользователь должен определить (входные данные).

Разметка будет выглядеть так:

<dl class="formStructure">
    <dt class="radio"><label for="option1">Yes</label></dt>
    <dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd>

    <dt class="radio"><label for="option2">No</label></dt>
    <dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd>
</dl>