CSSを使用してHTMLリストの水平スクロールを強制する方法は？

Question

私はこのようなリストがあります：

<div> 
    <ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    </ul> 
</div> 

と、次のCSS：私は左から右に表示するリスト項目を強制しようとしている

ul { 
    width: 160px; 
    height: 100px; 
    overflow: auto; 
    } 
li { 
    width: 80px; 
    display: inline-block; 
    float: left 
    } 

を、それが

one - two - three - four 

です

私の問題：このようにそれをやって
は私に2を持つ2つの行を提供しますそれぞれのアイテム。

質問：
私は、水平スクロールを使用できるように一列になり、すべてのリストアイテムを強制的にCSSの方法はありますか？今私がオーバーフローを設定する場合：自動私は欲しくない垂直スクロールバーを取得しています。

私はラッピング部門にこれを設定したくありません。私は、リスト内だけで使用できるCSSソリューションがあるかどうか不思議です。

ありがとうございました！

Answer 1

浮遊コンテンツを実際にスクロールすることはできません。浮動小数点数は、デフォルトでは親コンテナの幅や高さでは計算されません。実際には、<ul>は、設定された幅まで広がっているだけで、何もしていません。

float: leftを削除すると、スクロール可能になります。その場合、各インラインブロックの間に余分な「スペース」があるという唯一の問題があります。各リスト項目間の改行を削除することで削除できます。それは一番美しいものではありません。通常はfont-size: 0を使用して、リスト項目のfont-sizeをリセットします。

要素の幅に合わせて項目を改行しないようにする必要があります。

jsFiddle例：divの上

• Removing line breaks
• Using font-size: 0

Answer 2

<ul>の高さを制限していないので、ブラウザは「余分な」要素を自由にその行にラップすることができます。 height: 1emなどが必要です。<ul>の背が高くならないようにして、すべてを水平方向にスクロールさせる必要があります。

Answer 3

あなたはcss + javascriptで作成できます。 （http://www.smoothdivscroll.com/v1-2.htm）。クロスブラウザで動作するCSS専用のツールがあるとは思わないでください。

Answer 4

使用overflow-x: scroll;。

フィドルhere。

Answer 5

ここでの作業フィドルです：http://jsfiddle.net/qnYb5/

関連するCSS：

ul{ 
    list-style-type:none; 
    white-space:nowrap; 
    overflow-x:auto; 
} 

li{ 
    display:inline; 
}