HTMLリストの水平スクロール

Question

私のリストを水平にスクロール可能にしたいが、私が何をするにしても、コンテンツを幅でラップするようだ。私のリストはテーブルの中にあります。

HTML：

<td class="scrollable"> 
    <ol> 
    <li> bla bla bla bla </li> 
    </ol> 
</td> 

CSS：

td { 
    height: 200px; 
    overflow-x: auto; 
} 


ol { 
    height: 160px; 
    margin: 0; 
    padding:0; 

    border: 2px solid black; 
    overflow-y: auto; 
    overflow-x: auto; 
} 

li { 
    padding-bottom: 5px; 
    width: 95%; 
    white-space: nowrap; 
    display: inline; 
} 

.scrollable { 
    width: 10%; 
    overflow-y: auto; 
    overflow-x: auto; 
} 

は、どのように私はそれを水平にスクロールすることができますか？

Answer 1

スクロールバーは、必要なときにのみ表示されます。スクロールさせるのに十分なコンテンツがないだけです。他の問題に直面しているかどうかお気軽にお問い合わせください。 HTML以下

試してみてください。

<td class="scrollable"> 
    <ol> 
    <li> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</li> 
    </ol> 
</td> 

Jsfiddle：https://jsfiddle.net/nikdtu/d7u2c1b7/

Answer 2

あなただけのリストは、表のセルではなく、すべてのページ内でスクロール可能にしたい場合は、あなたがこのリストにいくつかの幅を設定する必要がありますコンテンツを追加してolの幅を100ピクセルに設定してみてください。