forza float: left div per non andate alla riga successiva

Question

Diciamo che ho avuto 20 stessi div con float: left proprietà e un po 'di larghezza. Voglio che siano in una riga e se non si adattano allo schermo solo per far scorrere la pagina orizzontalmente.

fiddle

Answer 1

Questo è fondamentalmente come galleggia lavoro. Se si desidera che il comportamento descritto si può fare qualcosa di diverso, invece, per esempio white-space: nowrap; sul contenitore e display: inline-block; invece di float.

http://jsfiddle.net/NPzsV/3/

.container { 
    white-space: nowrap; 
} 
.line { 
    display: inline-block; 
    width: 200px; 
    vertical-align: top; 
    white-space: normal; 
} 

Una cosa da notare però: con questo approccio, a capo/spazi/tabulazioni tra i div causerà uno spazio tra di loro nel rendering.

Answer 2

impostare l'altezza al div genitore, e aggiungere l'overflow di proprietà: scorrere

<div class="parentDiv"> 
    <div class="line">ddd</div> 
    <div class="line">ddd</div> 
    <div class="line">ddd</div> 
    ... 
</div> 

e css:

.parentDiv{height:50px; overflow: scroll;} 

Answer 3

Impostare una larghezza di duro sul elemento padre:

body{ width:8000px; } 

Demo

Answer 4

Uso display: inline-block invece di float: left dei div, e aggiungere la proprietà white-space: nowrap alla loro contenitore principale.

Demo: http://jsbin.com/akiniv/1/edit

Demo con il violino;) http://jsfiddle.net/NPzsV/4/