Làm cách nào để giữ một danh sách không có thứ tự nằm ngang bị phá vỡ?

Question

Tôi đang cố gắng tạo danh sách các hình thu nhỏ mà tôi có thể cuộn theo chiều ngang, nhưng nó không hoạt động bất kể tôi làm gì.

Đây là những gì tôi có bây giờ

http://jsfiddle.net/EXCf3/

ul{ 
    width: 100%; 
    list-style-type: none; 
    margin: auto; 
    overflow-x: scroll; 
} 
li{ 
    height: 100px; 
    width: 100px; 
    border: 1px solid red; 
    display: inline-block; 

} 

Bất kỳ ý tưởng về những gì tôi đang làm sai? Cảm ơn!

Answer 1

Thêm white-space: nowrap trên ul:

ul { 
    width: 100%; 
    list-style-type: none; 
    margin: auto; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

Demonstration.

Giải thích:

tôi đã sử dụng white-space tài sản bởi vì nó mang lại cho tôi khả năng để xử lý những gì để làm với các khoảng trắng bên trái trong vật thể nên tôi nói nó không quấn nó không gian xảy ra ul và hiển thị tất cả chúng trong một dòng.

Answer 2

sử dụng nowrap

ul { 

white-space: nowrap; 
width: 100%; 
list-style-type: none; 
margin: auto; 
overflow-x: scroll; 

    }