force float: divs trái để không đi đến dòng tiếp theo

Question

cho phép nói rằng tôi có 20 div giống nhau với float: left property và một số width. Tôi muốn họ ở trong một hàng và nếu họ không vừa với màn hình chỉ để cuộn trang theo chiều ngang.

fiddle

Answer 1

Đó là về cơ bản cách nổi công việc. Nếu bạn muốn hành vi được mô tả, bạn có thể làm điều gì đó thay thế, ví dụ: white-space: nowrap; trên vùng chứa và display: inline-block; thay vì phao.

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

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

Một điều cần lưu ý mặc dù: với cách tiếp cận này, newlines/chỗ/tab giữa các div sẽ gây ra một khoảng trống giữa chúng trong các rendering.

Answer 2

thiết lập chiều cao cho div cha mẹ, và thêm tràn bất động sản: di chuyển

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

và css:

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

Answer 3

Đặt chiều rộng cứng trên yếu tố phụ huynh:

body{ width:8000px; } 

Demo

Answer 4

Sử dụng display: inline-block thay vì float: left trên div và thêm thuộc tính white-space: nowrap vào vùng chứa chính.

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

Demo với fiddle của bạn;) http://jsfiddle.net/NPzsV/4/