thanh cuộn ngang cho ul

Question

Vì một lý do nào đó, tôi không thể ngăn UL và LI được gói. Tôi muốn chiều rộng của UL chính xác chiều rộng của LI trên một dòng (không có gói) và nếu UL trở nên rộng hơn nav-div (800px), tôi muốn có thanh cuộn trong nav để có thể cuộn LI.

Tôi đã thử khá nhiều thứ với màn hình, khoảng trống, chiều rộng và chiều cao, nhưng tôi chỉ có thể làm cho nó hoạt động nếu tôi cung cấp cho UL một chiều rộng nhất định. Tuy nhiên, đây không phải là một tùy chọn, vì trang được tạo và có thể chứa 1-20 LI.

Có ai biết làm thế nào để làm cho một thanh cuộn đi lên mà không cần thiết lập chiều rộng của UL?

HTML:

<div id="nav"> 
    <ul id="navbuttons"> 
      <li>Some text</li> 
      <li>Some text</li> 
      ... 
    </ul> 
</div> 

CSS:

div#nav 
{ 
    height: 100px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#nav ul li 
{ 
    margin-right: 15px; 
    float: left; 
    font-size: 12px; 
    list-style-type: none; 
} 

Answer 1

thử này

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
} 

Answer 2

Bằng cách đặt các width trên <ul>-inherit bạn có thể sử dụng overflow property để thiết lập các hành vi tràn của nguyên tố này. Với giá trị scroll, tất cả các nội dung của phần tử sẽ di chuyển (trong cả hai hướng x và y) nếu chiều cao và chiều rộng của các nội dung tràn của hộp:

div#nav ul 
{ 
    overflow: scroll; 
    width: inherit; 
    height: inherit; 
} 

Answer 3

Nên biết trước: chưa được kiểm tra

Would bạn không chỉ muốn đặt chiều rộng cho mục li

div#nav ul li {  
    margin-right: 15px;  
    float: left;  
    font-size: 12px;  
    list-style-type: none; 
    width: 100px; 
} 

Và sau đó đặt chiều rộng thành chiều rộng cố định và tràn trên UL để cuộn?

div#nav ul { 
    width: 800px; 
    overflow: scroll; 
} 

Điều này sẽ khiến bạn cuộn khi người bạn nói quá 8, đó là những gì bạn đang theo dõi?

Answer 4

Bạn có thể sử dụng display: inline-block; white-space: nowrap; cho wrapper và display: inline hoặc display: inline-block cho trẻ em.

Vì vậy, nó sẽ trông như thế này: http://jsfiddle.net/kizu/98cFj/

Và, nếu bạn sẽ cần phải hỗ trợ IE thêm hack này trong ý kiến ​​có điều kiện để cho phép inline-block s trong đó:

.navbuttons, 
.navbuttons LI { 
    display: inline; 
    zoom: 1; 
} 

Answer 5

Thêm dòng sau quy tắc:

div#nav ul { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    white-space: nowrap; 
}