Come posso creare etichette multilinea, verticalmente e orizzontalmente allineate per i pulsanti di opzione nei moduli HTML con CSS?

Question

Supponendo che il codice seguente:

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

Come faccio etichette dei pulsanti della radio stile in modo che essi hanno il seguente aspetto nella maggior parte dei browser (IE6 +, FF, Safari, Chrome:

Answer 1

Utilizzando il seguente markup e CSS sono stato in grado di produrre etichette più righe che non avvolgono sotto il pulsante di opzione:

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

però non ero in grado di utilizzare:

fieldset label { 
    vertical-align: middle; 
} 

a centra l'etichetta verticalmente sul pulsante di opzione, anche quando si applica una larghezza (entrambi i suggerimenti nella risposta di Dmitri Farkov.) Il mio scopo principale era quello di impedire il wrapping sotto il pulsante radio, quindi questa soluzione andrà bene per il momento

Answer 2

Effettuare ingresso e etichettare entrambe

float: left; 
display: block; 

impostare la larghezza di per l'etichetta e l'ingresso.

---

applicano

clear: both; 
vertical-align: middle; 

a tutta la Li.

Answer 3

Credo che questo faccia tutto. Non hai detto che deve convalidare, tuttavia, così ho usato il display inline-block (-moz-inline-box). Uno dei miei preferiti, in realtà.

Here's a working copy

testato in Safari 3, FireFox 3 e 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

Da quando ho chiesto come gestire etichette molto lunghe sopra, e alla fine l'ho risolto io stesso. Ecco la soluzione al problema my. Forse potrebbe aiutarti?

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