Cuộn ngang?

Question

Tôi không chắc chắn nơi tôi đã nhìn thấy điều này trước đây, nhưng im chắc chắn rằng có một cách để làm cho cuộn ngang.

Cho phép nói, ví dụ bạn có nhiều DIV là ff: cấu trúc:

<div class="container"> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
    <div>Content</div> 
</div> 

Im tìm kiếm một cách để làm cho nó sắp xếp theo chiều ngang và mà không vi phạm đến dòng kế tiếp. Và sẽ có một cuộn ngang thay vì cuộn dọc.

Thông thường nếu tôi đã thực hiện một phao: trái hoặc hiển thị: nội tuyến, sau khi div lấp đầy đủ không gian ngang nó sẽ đi đến dòng tiếp theo. Có anyway để làm cho nó phù hợp trong một đường thẳng ngang và làm cho một h-scroll cho điều đó?

Answer 1

này nên làm việc:

<div class="container"> 
    <div class="scroller"> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    <div class="content">Content</div> 
    </div> 
</div> 

<style> 
.container { 
    width:200px; 
    overflow:scroll; 
} 
.scroller { 
    width:1000px; 
} 
.content { 
    width:200px; 
    float:left; 
} 
</style> 

Answer 2

Bạn không thực sự có để thiết lập chiều rộng trong CSS. Đặt chiều rộng là không tốt vì nó không cho phép bạn mở rộng quy mô có nghĩa là bạn phải thay đổi chiều rộng mỗi lần bạn tạo phần tử mới. Thay vào đó, bạn nên cung cấp cho lớp .container một quy tắc white-space: nowrap và có con của mình display được đặt thành inline-block. Ví dụ.

.container { 
    white-space: nowrap; 
} 

.container > div { 
    display: inline-block; 
} 

Bây giờ bạn sẽ không còn phải đặt chiều rộng để nhận chức năng cuộn ngang này nữa.