ulの水平スクロールバー

Question

何らかの理由で、私はULを防ぐことができず、LIのラッピングができません。 ULの幅をLIの幅と同じにしたい（ラッピングなし）。また、ULがnav-div（800px）よりも広くなるようにするには、ナビゲーション内にスクロールバーを入れてLIをスクロールできるようにする。

ディスプレイ、空白、幅、高さで何かを試してみましたが、ULにある程度の幅を与えても効果があります。ただし、ページが生成され、1〜20個のLIを含むことができるため、これはオプションではありません。

ULの幅を設定せずにスクロールバーを作成する方法を知っている人はいますか？

HTML：

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

CSS：<ul>inheritにあなたは要素のオーバーフローの動作を設定するoverflow propertyを使用することができます上のwidthを設定することにより

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

はあなたがラッパーと子供のためのdisplay: inlineまたはdisplay: inline-blockためdisplay: inline-block; white-space: nowrap;を使用することができ、この

ul { 
    white-space:nowrap; 
} 

li { 
    display:inline; 
} 

Answer 2

。値scrollと、エレメントの内容の全てが、もし高さおよびコンテンツオーバーフローの幅箱のことを（x、y方向の両方に）スクロールする：

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

Answer 3

警告：未テスト

なりますあなただけのli項目について

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

を幅を設定し、スクロールするULの上に固定幅とオーバーフローに幅を設定したくありませんか？

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

これはあなたの李さんに行った過去が8を言うとき、あなたがULにスクロールさせるような、あなたが後に何をしているということでしょうか？

Answer 4

を試してみてください。

だから、それは次のようになります。あなたはIEがそれにinline-blockのを可能にするために、条件付きコメントでこのハックを追加サポートする必要があります場合は、http://jsfiddle.net/kizu/98cFj/

そして：

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

Answer 5

は、次の行を追加します。ルール：

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