come forzare lo scorrimento orizzontale in un elenco HTML usando CSS?

Question

Ho una lista come questa:

<div> 
    <ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    </ul> 
</div> 

e il seguente CSS:

ul { 
    width: 160px; 
    height: 100px; 
    overflow: auto; 
    } 
li { 
    width: 80px; 
    display: inline-block; 
    float: left 
    } 

sto cercando di forzare le voci per visualizzare da sinistra a destra, che è

one - two - three - four 

Il mio problema:
Fare così mi dà due file con due articoli ciascuno.

Domanda:
C'è un modo per forzare CSS le voci di elenco a tutti in una sola riga in modo da poter utilizzare lo scorrimento orizzontale? In questo momento se imposto l'overflow : auto Sto ottenendo solo barre di scorrimento verticali, che non voglio.

non voglio impostare questo sul div confezione. Sono solo curioso di sapere se esiste una soluzione CSS che posso utilizzare solo nella lista.

Grazie per l'aiuto!

Answer 1

Non è possibile scorrere realmente il contenuto flottato. Una volta che è flottato, non viene calcolato in base alla larghezza o all'altezza del contenitore genitore per impostazione predefinita. In realtà, lo <ul> si sta semplicemente espandendo alla sua larghezza impostata e quindi non sta facendo altro.

La rimozione di float: left li renderà scorrevoli. L'unico problema che avrai allora è che c'è uno "spazio" extra tra ogni blocco in linea. Puoi rimuoverlo rimuovendo le interruzioni di riga tra ogni elemento dell'elenco. Non è la cosa più carina. Normalmente userei uno font-size: 0 e quindi reimpostare la dimensione del carattere nella voce di elenco.

È inoltre necessario assicurarsi che gli elementi non si sovrappongano a una nuova riga quando colpiscono la larghezza dell'elemento.

Esempi jsFiddle:

• Removing line breaks
• Using font-size: 0

Answer 2

Non hai vincolato l'altezza dello <ul>, quindi il browser è libero di avvolgere gli elementi "extra" sulla propria linea. Avrai bisogno di un height: 1em o di qualsiasi altra cosa per assicurarti che lo <ul> non possa diventare più alto, costringendo tutto a scorrere orizzontalmente.

Answer 3

Puoi farlo con css + javascript, ad es. (Http://www.smoothdivscroll.com/v1-2.htm). Non pensare che ci sia un solforismo solo CSS (che funzionerà su browser).

Answer 4

Usa overflow-x: scroll; sul div.

Fiddle con esso here.

Answer 5

Ecco un violino di lavoro: http://jsfiddle.net/qnYb5/

Rilevante CSS:

ul{ 
    list-style-type:none; 
    white-space:nowrap; 
    overflow-x:auto; 
} 

li{ 
    display:inline; 
}