web-dev-qa-db-ja.com

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

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

<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つの行が得られます。

質問：
リスト項目をすべて1行にすることで、水平スクロールを使用できるCSSの方法はありますか？現在、overflow：autoを設定すると、垂直スクロールバーしか表示されません。これは望ましくありません。

これをラッピングdivに設定したくありません。リスト内で単独で使用できるCSSソリューションがあるかどうか、私は興味があります。

手伝ってくれてありがとう！

htmlcsshtml-listscss-floathorizontal-scrolling
21
frequent

フローティングコンテンツを実際にスクロールすることはできません。一度フロートされると、デフォルトでは親コンテナの幅または高さで計算されません。本当に<ul>は設定された幅に拡張され、その後は何もしません。

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

また、要素の幅に達したときにアイテムが改行で折り返されないようにする必要があります。

jsFiddleの例：

53
animuson

ここに作業フィドルがあります： http://jsfiddle.net/qnYb5/

関連するCSS：

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

li{
    display:inline;
}
34
MetalFrog

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

2
Marc B

使用する overflow-x: scroll; divで。

それをいじる here 。

1
Krazer

Css + javascriptで作成できます。 （http://www.smoothdivscroll.com/v1-2.htm）。 CSSのみの解決策（クロスブラウザで機能する）があるとは思わないでください。

1
daker