elementi a filo del margine

[joker06]

Ciao, ho un problema relativo alla distanza degli elementi dal margine.

Ho una lista <ul> con un tot di <li> (il numero è variabile). i <li> hanno il float:left e vengono visualizzati 4 per riga.

<li> <li> <li> <li>
<li> <li> <li> <li>
<li> <li> <li> <li>
<li> <li> <li> <li>

il problema che ho è che non riesco a posizionare a filo con il margine dx del contenitore, l'ultimo <li> di ogni riga.

<li> <li> <li> <li> <-- questo li non sta a filo
<li> <li> <li> <li> <-- questo li non sta a filo
<li> <li> <li> <li> <-- questo li non sta a filo
<li> <li> <li> <li> <-- questo li non sta a filo

Se lavoro con i margini sul mio portatile su cui sto sviluppando riesco a metterlo a filo, ma su altri monitor (sopratutto provando con chrome) non mi visualizza piu 4 <li> per riga ma solamente 3.

Ho provato con il display:inline-block tenendo conto dei pixel che aggiunge, ho messo i bordi interni per evitare che creassero problemi ma ancora niente. Per visualizzare su tutte le risoluzioni 4 <li> per riga devo lasciare questo spazio (circa 5px) che anche se è poco è abbastanza fastidioso perchè avendo un riferimento (con le dimensioni corrette) è eveidente questo disavanzo.

Qualche suggerimento?

Grazie in anticipo

[Mich_]

Probabilmente hai dei margini (o padding o bordi) a destra di ogni elemento (la cosa e` ragionevole per spaziare opportunamente gli elementi).

Dovresti eliminare il margine (padding/bordo) destro ogni 4 elementi.
La cosa si puo` fare (vedi la pseudoclasse :nth-child - ad esempio qui).

Pero` la cosa e` un po' pericolosa, perche` voler fare una formattazione cosi` puntuale su un sito Web che verra` visto da utenti con browser e monitor cosi` diversi, puo` portare a sorprese.

A mio parere una buona formattazione deve essere buona in tutti i browser e sistemi (compresi gli smartphone), possibilmente senza necessita` di scrolling orizzontale; e pazienza se non si riesce a farla ottima (che sarebbe ottima solo in alcune combinazioni e brutta o pessima in altre).

[joker06]

Si avevo già provato a gestire il margine del quarto elemento di ogni riga in maniera differente ma si presentava sempre il problema. Per il momento ho risolto allineando gli elementi centralmente in modo che rimangano pochi px a sx e pochi a dx. Mi sembra al momento la soluzione migliore per non avere come dici te "sorprese".

Per quel che riguarda smarthphone etc avranno css appositi

Grazie per la risposta