[html][css] Aiuto per creare uno scroll orizzontale

Salve!
Ho una lista ( <ul> ) che ha una larghezza fissa, i suoi figli ( <li> ) devono disporsi orizzontalmente all'interno di questa. Fin qui nessun problema.

Se però questi <li> occupano uno spazio più ampio della larghezza di <ul> si deve creare uno scroll orizzontale, ed è proprio qui che mi perdo: i <li> invece di continuare sulla stessa riga vanno accapo!

Vi posto una pagina di esempio: [RISOLTO, ho rimosso il link] e una parte del sorgente HTML per illustrare meglio il problema:

Codice HTML:

---

        <ul>
                <li>A</li>
                <li>B</li>

                <li>C</li> <!-- qui la lista viene "spezzata" -->
                <li>D</li>
                <li>E</li>
                <li>F</li>
        </ul>

---

Sapete come fare?
Mi affido a voi :)

Prova ad aggiungere al tag <ul> lo stile white-space:nowrap. Per la scrollbar, se la vuoi solo orizzontale puoi usare overflow-x invece di overflow (si usa allo stesso modo).

Stammi bene...

Niente da fare, la lista viene spezzata sempre dopo C.

È normale: un elemento posizionato mediante float non potrà uscire (quindi creare un overflow) dal contenitore.
Per fare ciò che vuoi tu devi eliminare il float e impostare la proprietà display su inline-block.
Ricorda infine che dovrai eliminare nel sorgente ogni spazio presente tra i tag di apertura e di chiusura dei vari li.

Lo supponevo, ma avevo già provato.
Ho ri-applicato le modifiche che mi hai suggerito ma il problema persiste.
E non capisco perchè visualizzo lo scroll verticale quando nei css ho impostato solo la proprietà overflow-x!

Devi impostare anche la proprietà white-space su nowrap, come suggerito da Dementialsite.

Ok, ora funziona :mrgreen:!
Grazie mille ad entrambi.