Không thể nhận được ul được liệt kê theo chiều ngang để tràn theo chiều ngang (và cuộn)

Tôi đang cố gắng để có được một danh sách không theo thứ tự được liệt kê theo chiều ngang (hoàn thành với float: left), nhưng nó từ chối tràn theo chiều ngang. Thay vào đó, nó sẽ tự động tràn trong dòng tiếp theo (hơn nữa, ngay cả với overflow-y:.? None, nó tạo ra một thanh cuộn dọc tự động Bất cứ ý tưởngKhông thể nhận được ul được liệt kê theo chiều ngang để tràn theo chiều ngang (và cuộn)

<style type="text/css"> 
    ul { 
     height:15px; 
     width:400px; 
     overflow-y:none; 
     overflow-x:auto; 
    } 

    li { 
     float:left; 
    } 

</style> 

<body> 
    <div> 
     <ul id="someList"> 
      <li>element 1</li> 
      <li>element 2</li> 
      <li>element 3</li> 
      <li>element 4</li> 
      <li>element 5</li> 
      <li>element 6</li> 
      <li>element 7</li> 
     </ul> 
    </div> 
</body>

Nguồn

2011-06-28 achow

Tôi có thể hỏi trong bối cảnh nào bạn muốn một thanh cuộn ngang trên một danh sách không theo thứ tự? – Zoidberg

Nếu tôi hiểu đúng, điều này sẽ có thể là:

http://jsfiddle.net/Uyc8d/

tôi đã chuyển sang display: inline-block (thay vì float: left), và tôi đang sử dụng để ngăn chặn white-space: nowrap gói.

ul { 
    width: 400px; 
    overflow-x: scroll; 
    background: #ccc; 
    white-space: nowrap 
} 

li { 
    display: inline-block; 

    /* if you need ie7 support */ 
    *display: inline; 
    zoom: 1 
}

Nguồn

2011-06-28 22:29:23 thirtydot

Tôi ấn tượng thưa ngài. – Zoidberg

Cảm ơn bạn, thưa ngài. Ấn tượng. – achow

trắng-không gian: nowrap; đã giúp tôi, cảm ơn! –

Không thể nhận được ul được liệt kê theo chiều ngang để tràn theo chiều ngang (và cuộn)

Trả lời

Các vấn đề liên quan