水平スクロールバーを表示する方法

Question

.itemの束全体を囲む#itemsという項目があります。項目を横に並べて表示し、ページの幅を超えている場合は横スクロールバーを表示します。

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

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

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

私はこのような何かをしようとしたが、それは

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

を動作しません。私は、これはそれを行うための方法だと思ったが、私は仕事に道にこれを取得することはできませんので、私は修正や他の方法にもオープンしています。

Answer 1

この前の質問には役立つことがあります。だからではなく、あなたの現在のCSSの CSS div element - how to show horizontal scroll bars only?

を、のように変更します。それを試してみて、必要に応じて調整

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

。

Answer 2

あなたは正しい道の上にありますが、あなたはそれを動作させる必要があり、余分なラッパーます...

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

してからCSS：

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

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

    .item{ 
    float:left;  
    } 

Answer 3

この質問は/how-to-force-horizontal-scrolling-in-an-html-list-using-cssに関連していますanimusonは、浮遊している元素は測定できないと説明しています。

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

.item{ 
display: inline-block; 
} 

と同じjsfiddle

Answer 4

は、私はあなたが#itemsのための幅を提供しないことを好むだろう。私の場合、.itemの数は動的であり、それらを合計することは自分の好みではありませんでした。

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

.item {    
      display:inline; 
     }