Listato particolare

[ALonE]

Salve

ho un listato composto da 5 voci, dovrei allinearli in questo modo, le prime quattro che si dividessero la larghezza completa della finestra e l'ultima che rimanesse centrata sulle prime 4.
Avevo fatto in questo modo:
Html:

<div id="lista">
  <ul>[*]voce 1[*]voce 2[*]voce 3[*]voce 4[*]voce 5[/list]
</div> 

Css:

<style>
#lista{
    width:100%;
    text-align:center;
}
#lista ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
#lista ul li{
    text-align:center;
    width:25%;
    float:left;
}
</style> 

Solo che:
- in IE dopo la 3a voce mi va a capo;
- come faccio a far in modo che l'ultima voce sia centrata rispetto le prime 4?

Esempio di come vorrei che risultasse l'elenco:

+--------------------+
|  1    2    3    4  |
|         5          |
+--------------------+

Questo invece è quello che accade con IE:

+--------------------+
|  1    2    3       |
|  4    5            |
+--------------------+

Questo invece quello che accade con FF (più simile a quello che voglio ottenere):

+--------------------+
|  1    2    3    4  |
|  5                 |
+--------------------+

[erredeco]

In realtà IE e FF si comportano tutti e due nella stessa maniera, facendo "scivolare" sotto gli elementi quando non hanno più posto dove piazzarli sulla stessa riga.
La diversa resa deve essere dovuta a qualcos'altro.

Da quello che ho capito tu vorresti che la 5a voce venga visualizzata tra dopo la 1a e la 2a...
Beh... penso che con le liste sia molto difficile, a meno di non usare posizionamenti assoluti.

Altrimenti, se puoi rinunciare alle liste, guarda questo articolo, che tratta di come incolonnare un qualsiasi numero di <DIV> con qualsiasi ordine:

http://www.positioniseverything.net/...ayout/anyorder

[ALonE]

mah... non è esattamente quello che intendevo.
In un certo senso mi sono arrangiato in questo modo ma ancora non è quello che vorrei ottenere:
CSS:

<style>
#lista{
    width:100%;
    text-align:center;
}
#lista ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
#lista ul li{
    text-align:center;
    width:25%;
    float:left;
}
#lista ul li.last{
    width:100%;
}
</style> 

HTML:

<div id="lista">
  <ul>[*]voce 1[*]voce 2[*]voce 3[*]voce 4
    <li class="last">voce 5[/list]
</div> 

La cosa che più mi da fastidio è che su IE si vede in questo modo:

+--------------------+
|  1    2    3       |
|  4                 |
|         5          |
+--------------------+

E su FF in quest'altro:

+--------------------+
|  1    2    3   4   |
|         5          |
+--------------------+

Cioè impostando la larghezza dei [*] a un 25% mi aspetterei che i vari [*] dividessero lo spazio a loro disposizione in 4 colonne, invece in IE le ultime 2 vanno a capo.
Impostando la larghezza a 24.99% invece in explorer i primi 4 [*] rimangono su una stessa riga, dividendo lo spazio in 4 colonne.
Ovviamente l'ultimo [*] avendo come larghezza 100% rimane da solo centrato nello spazio.
Questo è il mio piccolo trucco, ovviamente non funziona più se gli elementi sono 6 dove gli ultimi 2 (6-4=2) restanti dovrebbero avere una larghezza del 50% o se sono 3 (7-4=3) addirittura del 33.33%, pazzesco come si potrebbe fare una cosa del genere???

Cmq ho notato un'altra incongruenza su IE, se metto al mio
<div> che contiene il listato un bordo di 1px e la larghezza ai [*] di 25% allora si vedono correttamente come per FF... MAH?!?!? non capisco.