cách hiển thị thanh cuộn ngang

Question

Tôi có div #items bao quanh toàn bộ bó .item. Tôi muốn hiển thị các mục cạnh nhau và nếu chúng vượt quá chiều rộng của trang, hãy hiển thị thanh cuộn ngang.

<div id="somediv"></div> 

<div id="items"> 
    <div class="item"> 
    Item content 
    </div> 
</div> 

<div id="someotherdiv"></div> 

tôi đã cố gắng một cái gì đó như thế này nhưng nó không hoạt động

#items{ 
    overflow: auto; 
    width:100%; 
    height:200px;  /* this is the height of each item*/ 
} 
.item{ 
    float:left;  
} 

Tôi nghĩ đây là cách để làm điều đó, nhưng tôi không thể có được điều này với cách làm việc, vì vậy tôi mở để sửa chữa và những cách khác cũng có.

Answer 1

câu hỏi trước này có thể giúp: CSS div element - how to show horizontal scroll bars only?

Vì vậy, thay vì css hiện tại của bạn, thay đổi nó để:

#items{ 
    overflow-x: scroll; 
    overflow-y: auto; 
    width:100%; 
    height:200px 
} 
.item{ 
    float:left; 
} 

Hãy thử điều đó và điều chỉnh nếu cần thiết.

Answer 2

Bạn đang trên con đường đúng đắn, nhưng bạn sẽ cần và thêm wrapper để làm cho nó làm việc ...

<div id="scrollable"> 
<div id="items"> 
    <div class="item"> 
    Item content 
    </div> 
</div> 
</div> 

và sau đó CSS ​​của bạn:

#scrollable { 
     overflow: auto; 
     width:100%; 
     height:200px; 
    } 

    #items { 
    width: 3000px; /* itemWidth x itemCount */ 
    } 

    .item{ 
    float:left;  
    } 

Answer 3

Câu hỏi này có liên quan đến /how-to-force-horizontal-scrolling-in-an-html-list-using-css trong đó animuson giải thích rằng các yếu tố nổi không thể đo được.

#items{ 
overflow: auto; 
white-space: nowrap; 
width:100%; 
height:200px 
} 

.item{ 
display: inline-block; 
} 

Và cùng jsfiddle

Answer 4

tôi muốn bạn không cung cấp chiều rộng cho #items. Trong trường hợp của tôi, số lượng .item là động và tổng hợp chúng không nằm trong sở thích của tôi.

#items{ 
      overflow: auto; 
      white-space:nowrap; 
     } 

.item {    
      display:inline; 
     }