cách buộc cuộn ngang trong danh sách HTML bằng CSS?

Question

tôi có một danh sách như thế này:

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

và CSS sau đây:

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

Tôi đang cố gắng để buộc các mục danh sách để hiển thị từ trái sang phải, đó là

one - two - three - four 

Vấn đề của tôi:
Làm như thế này cho tôi hai hàng với hai mỗi mục.

Câu hỏi:
Có cách nào CSS để buộc các mục danh sách cho tất cả được trong một hàng duy nhất để tôi có thể sử dụng cuộn ngang? Ngay bây giờ nếu tôi thiết lập một sự cố tràn : tự động Tôi chỉ nhận được các thanh cuộn dọc mà tôi không muốn.

Tôi không muốn đặt điều này trên div gói. Tôi chỉ tò mò nếu có một giải pháp CSS tôi có thể sử dụng trong danh sách một mình.

Cảm ơn bạn đã trợ giúp!

Answer 1

Bạn thực sự không thể cuộn nội dung được thả nổi. Khi nó được thả nổi, nó không được tính theo chiều rộng hoặc chiều cao của vùng chứa cha theo mặc định. Thực sự, <ul> chỉ đang mở rộng đến chiều rộng đã đặt của nó và sau đó không làm bất cứ điều gì khác.

Xóa float: left sẽ làm cho chúng có thể cuộn được. Vấn đề duy nhất bạn sẽ có sau đó là có thêm "khoảng trống" giữa mỗi khối nội tuyến. Bạn có thể xóa điều đó bằng cách xóa các ngắt dòng giữa mỗi mục danh sách. Đó không phải là điều đẹp nhất. Thông thường tôi sẽ sử dụng font-size: 0 và sau đó đặt lại kích thước phông chữ trong mục danh sách.

Bạn cũng cần phải đảm bảo rằng các mục không được bọc vào một dòng mới khi chúng đạt đến chiều rộng của phần tử.

Ví dụ jsFiddle:

• Removing line breaks
• Using font-size: 0

Answer 2

Bạn chưa hạn chế chiều cao của <ul>, do đó trình duyệt được tự do quấn các phần tử 'phụ' vào dòng của riêng mình. Bạn cần có height: 1em hoặc bất kỳ thứ gì để đảm bảo rằng <ul> không thể cao hơn, buộc mọi thứ phải cuộn theo chiều ngang.

Answer 3

Bạn có thể tạo bằng css + javascript, ví dụ: (http://www.smoothdivscroll.com/v1-2.htm). Đừng nghĩ rằng có một chỉ có CSS ​​(mà sẽ làm việc qua trình duyệt).

Answer 4

Sử dụng overflow-x: scroll; trên div.

Fiddle with it here.

Answer 5

Dưới đây là một fiddle làm việc: http://jsfiddle.net/qnYb5/

liên quan CSS:

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

li{ 
    display:inline; 
}