Comment faire des étiquettes alignées verticalement et horizontalement sur plusieurs lignes pour les boutons radio dans les formulaires HTML avec CSS?

Question

En supposant que le balisage suivant:

<fieldset> 
    <legend>Radio Buttons</legend> 
    <ol> 
     <li> 
      <input type="radio" id="x"> 
      <label for="x"><!-- Insert multi-line markup here --></label> 
     </li> 
     <li> 
      <input type="radio" id="x"> 
      <label for="x"><!-- Insert multi-line markup here --></label> 
     </li> 
    </ol> 
</fieldset> 

Comment les étiquettes des boutons radio I de style afin qu'ils ressemblent à ce qui suit dans la plupart des navigateurs (IE6 +, FF, Safari, Chrome:

Answer 1

En utilisant le balisage suivant et css je suis en mesure de produire des étiquettes multi-lignes qui n'enveloppent pas sous le bouton radio:

<style type="text/css"> 
    fieldset input, label { 
     float: left; 
     display: block; 
    } 

    fieldset li { 
     clear: both; 
    } 
</style> 

<fieldset> 
    <ol> 
    <li> 
     <input type="radio" id="x" /> 
     <label for="x"> 
     stuff<br/> 
     stuff1 
     </label> 
    </li> 
    <li> 
     <input type="radio" id="x" /> 
     <label for="x"> 
     stuff<br/> 
     stuff1 
     </label> 
    </li> 
    </ol> 
</fieldset> 

mais je ne pouvais pas utiliser:

fieldset label { 
    vertical-align: middle; 
} 

à centrer l'étiquette verticalement sur le bouton radio, même en appliquant une largeur (les deux suggestions dans la réponse de Dmitri Farkov.) Mon but principal était d'empêcher l'enroulement sous le bouton radio, donc cette solution ira bien pour le moment

Answer 2

Marque entrée et étiqueter les deux

float: left; 
display: block; 

Set est pour l'étiquette et l'entrée largeur.

---

appliquent

clear: both; 
vertical-align: middle; 

à tous les Li.

Answer 3

Je crois que cela fait tout. Vous n'avez pas mentionné qu'il doit valider, cependant, j'ai donc utilisé l'affichage inline-block (-moz-inline-box). Un de mes favoris, en fait.

Here's a working copy

testés dans Safari 3, FireFox 3 et IE7.

<style type="text/css"> 
ol{ 
    padding-left: 0; 
    margin-left:0; 
} 

ol>li { 
    list-style-type: none; 
    margin-bottom: .5em; 
} 

ol>li input[type=radio] { 
    display: -moz-inline-box; 
    display: inline-block; 
    vertical-align: middle; 
} 

ol>li label { 
    display: -moz-inline-box; 
    display: inline-block; 
    vertical-align: middle; 
} 
</style> 

Answer 4

Depuis que j'ai demandé comment manipuler des étiquettes vraiment longues ci-dessus, et j'ai finalement résolu moi-même. Voici la solution au problème mon. Peut-être que ça pourrait t'aider?

<style type="text/css"> 
    #master_frame { 
     background: #BBB; 
     height: 300px; 
     width: 300px; 
    } 
    fieldset.radios { 
     border: none; 
    } 
    fieldset fields { 
     clear: both; 
    } 
    input { 
     float: left; 
     display: block; 
    } 
    label { 
     position: relative; 
     margin-left: 30px; 
     display: block; 
    } 
</style> 

<div id="master_frame"> 
    <fieldset class='radios'> 
    <div class='field'> 
     <input type="radio" id="a" /> 
     <label for="a">Short</label> 
    </div> 
    <div class='field'> 
     <input type="radio" id="b" /> 
     <label for="b"> 
     A really long and massive text that does not fit on one row! 
     </label> 
    </div> 
    </fieldset> 
</div>