Выравнивание по правому краю и выравнивание по вертикали с помощью флажка / переключателя CSS

Question

Я очень близок, и это работает в Safari, Firefox и IE8, однако в IE7 метки и переключатели не совпадают по вертикали.

Мой HTML-код:

<div id="master-container">
    <fieldset id="test">
    <legend>This is a test of my CSS</legend>
         <ul class="inputlist">
             <li>
                 <label for="test1">Test 1</label>
                 <input name="test1" id="test1" type="checkbox" disabled="disabled"/>
             </li>
             <li>
                 <label for="test2">Test 2</label>
                 <input name="test2" id="test2" type="checkbox" disabled="disabled"/>
             </li>
         </ul>
    </fieldset>
</div>

Мой CSS-код:

html {
    font-family:Arial,Helvetica,sans-serif;
}
#master-container {
    width:615px;
    font-size:12px;
}

ul.inputlist {
    list-style-type:none;
}
ul.inputlist li {
    width:100%;
    margin-bottom:5px;
}
ul.inputlist li label {
    width:30px;
    text-align:right; 
    margin-right:7px;
    float:left;
}

EDIT:
Основываясь на предложении проверить остальные мои HTML и CSS. Я обновил код выше и теперь он точно демонстрирует проблему. Если я возьму font-size из #master-container, он выстроится в линию, но тогда это будет неправильный размер шрифта. Я пытался добавить font-size к ul.inputlist li input, но это не помогло. Какие-либо предложения? Спасибо всем за помощь!

Answer 1

Это может быть то, что вам нужно:

label, input {vertical-align: baseline;}

Оба элемента, имеющие одинаковое свойство, помогут. Также базовая работа работает аналогично. Середина работает по-другому в IE7.

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

Answer 2

А как насчет добавления "clear: both" к элементам li:

ul.inputlist li{width:100%;margin-bottom:5px;clear:both}