Adattare width ultimo LI a spazio rimanente (float left)

[cristian3095]

Salve, ho una lista disposta in orizzontale tramite float:left
la lista ha una dimensione fissa, e vorrei che l'ultimo elemento della lista andasse ad occupare tutto lo spazio rimanente.

Esempio:
la lista ha width:980px
gli LI non hanno una dimensione fissa, ma facciamo finta che siano tutti di larghezza 300px
vorrei che l'ultimo elemento della lista fosse largo 90px (980-300-300-300)

[Mich_]

Non hai postato il codice, per cui non e` facile capire esattamente di cosa si tratta.

Se ho capito giusto (a parte i tuoi errori di calcolo), dovrebbe essere sufifciente non definire la larghezza dell'ultimo oggetto: se poi tecnicamente l'oggetto ci sta non va a capo (pero` se la scritta occupa uno spazio maggiore degli 80 px rimanenti andra` a capo).

Se poi il problema e` di far apparire graficamente l'oggetto che prosegua fino alla fine della riga, occorre lavorare con tecniche simili alle "false colonne" (dare uno sfondo al contenitore uguale allo sfondo dell'ultimo elemento).

[baobabdesign]

ciao hai provato con le percentuali?

[cristian3095]

Si ho sbagliato a scrivere, volevo dire 80px.
Nell'ultimo elemento dovrò metterci del testo che vorrei fosse centrato quindi ho bisogno che l'elemento che lo contiene (in questo caso <li>) arrivasse fino alla fine della riga.
Le percentuali non posso usarle poiché gli elementi che precedono non hanno dimensioni prefissate, ma possono cambiare.

[baobabdesign]

infatti l epercentuali ti servono quando non usi una dimensione fissa.
Scusa hai il contenitore del menu 100%
fai che hai 5 link + l' ultimo che arriva alla fine quindi 6 link in tutto
dai 10% ai 5 link e 50% all' ultimo link.

[cristian3095]

il problema è che gli LI si adattano automaticamente al testo che c'è all'interno, quindi se il testo fosse più lungo del 10% andrebbe a capo.
Allego un'immagine per capire meglio
Lista.jpg

nella prima riga puoi vedere come è per ora la lista: c'è un header che la contiene, la lista ha una dimensione fissa di 980px, i singoli elementi si adattano al testo che contengono.
nella seconda riga ho aggiunto un'ultimo elemento che deve allargarsi per tutto lo spazio rimanente, in modo da poterci mettere il testo allineato al centro.
Spero adesso sia più chiaro.

[Mich_]

Ma tu sai a priori quanti oggetti ci sono prima dell'ultimo e quanto occupano ciascuno?
Oppure e` una pagina dinamica che viene generata da un CMS o sim?

Nel primo caso puoi lasciare tutto lo spazio (100%) all'ultimo elemento e poi gli togli (margin-left) lo spazio occupato dai primi elementi; a quel punto puoi anche centrare il testo all'interno (padding automatico).
Nel secondo caso, credo che puoi farci poco lato client con i CSS; puoi pero` usare JS (lato client); oppure fai i calcoli lato server, dopo aver letto le dimensioni della finestra.

[cristian3095]

So solo il numero di elementi, la larghezza dipende dal contenuto quindi non so quanto occupa.

[Mich_]

Le risposte si sono incrociate ...

Comunque la cosa diventa un po' troppo complessa per risolverla con solo CSS (parere mio, magari qualcuno mi smentisce ...)
Vedi se puoi usare le soluzioni alternative proposte prima (JS oppure calcoli lato server)

[baobabdesign]

ok allora io userei javascript.
Farei un contenitore totale e inesrirei un contenitore dei link base in relative e l' altro del testo in absolute.
A questo punto ottengo la lunghezza del div del testo sottraendo dai 980px la lunghezza del div contenitore dei link.
ovviamente devi fare la stessa funzione se fai il resize della finestra, cmq sono poche righe di codice.