crea una singola riga di div con barre di scorrimento orizzontali

Question

Ok, quindi pensavo di averlo risolto usando lo spazio bianco: no-wrap funzionava in chrome ma nient'altro.

ho qualcosa di simile a questo:

<div class="outer"> 
    <ul> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg1.jpg" /></a> 
      <br /> 
      EG1 lorem ipsum 
      </div> 
     </li> 

     <li> 
      <div class="inner"> 
      <a href="#"><img src="eg2.jpg" /></a> 
      <br /> 
      EG2 lorem ipsum 
      </div> 
     </li> 
. 
. 
. 
//etc (multiple li's) 

</ul> 

</div> 

scusa l'immagine veramente poveri, ma questo è il im EFF puntando.

Voglio una singola riga di "elementi" se superano lo spazio quindi dovrebbero apparire le barre di scorrimento orizzontale.

speranza che abbia senso, come posso ottenere questo?

Answer 1

scrittura come questo:

.outer{ 
    width:400px; 
    overflow:auto; 
    white-space:nowrap; 
} 
.outer li{ 
    display: inline-block; 
    *display: inline;/*For IE7*/ 
    *zoom:1;/*For IE7*/ 
    vertical-align:top; 
    width:40px; 
    margin-right:20px; 
    background:red; 
    white-space:normal; 
} 

Scegli questa http://jsfiddle.net/ZrpHv/

Answer 2

Beh, so che ogni webdeveloper buono e purista mi odierà (e mi odio quando pubblico qualcosa del genere) ma puoi semplicemente usare la tabella per farlo.

funziona su tutti i browser. Sì, non è standard, no non è CSS. Ma ... la produttività è talvolta migliore dello standard.

È anche possibile utilizzare una larghezza di divisione fissa per il contenitore (ul). e utilizzare float posizione lasciato per tutti i tuoi figli

Answer 3

Hai bisogno di mettere un enorme div orizzontale all'interno del div genitore con overflow: auto; Ciò consentirà di fluttuare a sinistra senza spostarsi alla riga successiva, e si farà scorrere solo quando il confine della div principale è attraversato.

Answer 4

è necessario impostare la larghezza si div.inner a qualcosa di assoluto, come 64px e rendere il vostro li s float a destra oa sinistra e quindi impostare la proprietà overflow-x del div genitore a auto. controlla questo fiddle