Salve ragazzi.
da ieri stò sbattendo la testa contro un problema apparentemente alquanto banale ma che invece a me risulta irrisolvibile (almeno nel modo in cui voglio).
brevemente, devo allineare orizzontalmente dei radio button al loro testo associato.
i radio button sono inseriti in elenco uno sotto l'altro in un box a larghezza fissa.

il problema nasce quando il testo associato a ciascun radio button supera la larghezza del box e va a disporsi nella riga sotto, producendo un antiestetico effetto!
Il comportamento che vorrei invece ottenere è quello che si otterrebbe inserendo i radio button nella prima colonna di una tabella e la descrizione associata nella seconda, impostando il vertical align delle celle a middle.

solo che io NON voglio utilizzare una tabella .

Le ho provate tutte, ma non riesco ad ottenere quello che voglio semplicemente usando un <ul> e lavorando con i css !

vi posto il codice che vorrei usare e quello con l'utilizzo della tabella (che ha il risultato grafico che vorrei ottenere)

codice:
<div id="poll">
  <div class="title"><h4>Sondaggio corrente</h4></div>
  

Domanda del sondaggio</p>
  <form method="post" action=""> 
    <ul>[*]<input type="radio" name="currentPollRadio" id="PollId1" value="1" /><label for="pollId1">testo del sondaggio su due linee</label>
      [*]<input type="radio" name="currentPollRadio" id="pollId2" value="2" /><label for="pollId2">testo del sondaggio su due linee</label>
      [*]<input type="radio" name="currentPollRadio" id="pollId3" value="3" /><label for="pollId3">testo su una linea</label>
      [*]<input type="radio" name="currentPollRadio" id="pollId4" pollvalue="4" /><label for="pollId4">testo su una linea</label>
      [/list]
  </form>
</div>


codice:
<table summary="poll">
  <tr>
    <td><input type="radio" name="currentPollRadio" id="PollId1" value="1" /></td>
    <td>testo del sondaggio su due linee</td>
  </tr>
  <tr>
    <td><input type="radio" name="currentPollRadio" id="pollId2" value="2" /></td>
    <td>testo del sondaggio su due linee</td>
  </tr>
  <tr>
    <td><input type="radio" name="currentPollRadio" id="pollId3" value="3" /></td>
    <td>testo su una linea</td>
  </tr>
  <tr>
    <td><input type="radio" name="currentPollRadio" id="pollId4" 4" /></td>
    <td>testo su una linea</td>
  </tr>
</table>

ed ecco invece il css associato (per entrambi gli spezzoni xhtml)

codice:
#poll {
   float:left;
	margin:0;
	padding:0;
	width:158px;
}

#poll ul {
	margin:0;
	padding:0;
	list-style:none;
}

#poll li {
   overflow:hidden;
	margin-bottom:4px;
	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:14px;
}

#poll p {
   margin:5px 0 0 5px;
	padding:0;
	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height:14px;
	color:#000;
	background-color:transparent;
}

#poll form {
	margin:17px 0 0 4px;
	padding:0;
}

#poll table {
	font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

come ho già detto ne ho provate di tutte, rendere flottanti label e input, impostare margini, visualizzarli a livello di blocco, vertical align...
ma il risultato con la semplice tabella è irriproducibile