Problema con LI width

[behemoth]

non riesco a risolvere questo annoso problema..

voglio creare un UL con gli elementi LI inline che abbiano tutti la stessa larghezza (width). il browser non la prende.

è un problema che è stato affrontato qua e là ma ancora nn riesco a trovare una soluzione che mi soddisfi. potrei arrangiarmi con il padding del LI ma il risultato grafico non è per niente lo stesso.

html:

<ul>
[*]bla
[*]blabla
[*]blablablabla
[*]blabla
[*]blablablabla
[*]bla
[/list]


css:

ul{
list-style-type:none;
}

li{
display:inline;
width:100px;
}

vorrei anche evitare di mettere una larghezza fissa agli a (anche se non mi sembra che funzioni..)

grazie!

[seed_squall_it]

Non puoi impostare la larghezza di un elemento inline. Gli elementi inline sono larghi sempre quanto basta per racchiudere esattamente il loro contenuto (più eventuali padding, border e margin orizzontali). E come hai detto tu, usando il padding è chiaro che non otterresti l'effetto voluto, trattandosi di link testuali di larghezze diverse. La soluzione è dichiarare gli elementi[*] come elementi block-level per poterne impostare le dimensioni. E' chiaro che così si disporrebbero uno sotto l'altro e non affiancati. Quindi, l'unico sistema è dichiarare gli elementi[*] come flottanti a sinistra (float: left). Con questa dichiarazione, i tuoi[*] risulteranno affiancati e saranno trasformati implicitamente in elementi a livello di blocco. Tieni presenti solo due cose:

1. Devi dichiarare float: left anche gli elementi <a> contenuti nei[*] per evitare un bug di Internet Explorer per Mac (so che non lo usano in molti e in più ormai è stato abbandonato, ma è comunque una buona cosa cercare di evitare i bug che i browser si portano dietro).

2. Dichiarando flottanti gli elementi[*], otterrai l'effetto collaterale che essi saranno estratti dal flusso del documento e quindi la loro presenza non influirà sulla disposizione degli altri elementi. Puoi risolvere questo "inconveniente" in vari modi, a seconda di come è strutturato il tuo layout. Potresti ad es. impostare un margin-top al box che appare sotto la tua lista alto tanto quanto gli elementi[*], oppure puoi semplicemente "ripulire" il float con un elemento vuoto che faccia il clear subito dopo aver chiuso l'<ul>, come un <br class="clear" /> (la cui classe imposta la regola di stile clear: left. Questo è senza dubbio il sistema migliore).