Etiquette Alignement à droite et alignement vertical avec case à cocher/bouton radio CSS

Question

Je suis très proche et je l'utilise dans Safari, Firefox et IE8, mais IE7 les étiquettes et les boutons radio ne s'alignent pas verticalement.

Mon HTML est:

<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> 

Mon 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:
Basé sur la suggestion de vérifier le reste de mon html et css. J'ai mis à jour le code ci-dessus et maintenant il démontre avec précision le problème. Si je prends font-size sur #master-container, il s'aligne, mais ce n'est pas la bonne taille de police. J'ai essayé d'ajouter un font-size à ul.inputlist li input mais cela n'a pas aidé. Aucune suggestion? Merci pour votre aide tout le monde!

Answer 1

Cela pourrait être ce dont vous avez besoin:

label, input {vertical-align: baseline;} 

deux éléments avec la même propriété, vous aidera. De plus, les travaux de base sont similaires. middle fonctionne différemment dans IE7.

J'espère que ça aide!

Answer 2

Qu'en est-il d'ajouter « clear: both » aux éléments li:

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