1

重複の可能性:
CSS の水平スクローラー

私は 320px 幅を持っていDIVます。UL LI内部にはナビゲーションがあり、それぞれがLI左にフロートして 1 行で表示されます。それらを隣り合わせに積み重ね、親の下部にスクロールバーを表示してDIV、コンテンツを水平にスクロールします。

  • の数がわからないLI（動的生成）
  • UL(動的に生成された)の幅がわからない
  • 一度に 1 つずつではなく、複数のアイテムを一度に表示する必要があります。

  • これを解決するには、CSSのみの方法を使用したいと思います。

     #menu
 {
    width: 320px;
    overflow: scroll;
 }

 ul li
 {
    float: left;
    display: block;
 }

 <div id="menu">
    <ul>
       <li><a href="#">Car</a></li>
       <li><a href="#">Very long text item</a></li>
       <li><a href="#">Foobar foobar</a></li>
    </ul>
 </div>

問題: 動作しません。水平スクロールバーはありません。フロートは、親 DIV の複数の行に折り返されてスタックされます。

4

4 に答える 4

3

左もフロートし、<ul>幅が常に外側の DIV の幅を超えるように、非常に大きな負のマージンを与える必要があります。そのようです：

#menu
{
  width: 320px;
  overflow: auto;
}

ul
{
  float: left;
  margin-right: -30000px;
}

ul li
{
  float: left;
  display: block;
}

ULのfloat: leftおかげで、巨大なマージンによって余分な余白ができることはありません。

jsFiddle: http://jsfiddle.net/8SEQT/5/

于 2012-07-13T05:26:48.923 に答える
1

これを試してください..それぞれの幅を割り当て<li>ます..

li
{
    width:100px;
    float:left;
    display:block;
    margin-right:-110px
}

はmargin-right:-xxxpx、各アイテムの後に常にxxxpxのスペースを残して、別のアイテムを収容し、リストアイテムが次の行に移動しないようにします...

于 2012-07-13T05:14:17.570 に答える
1

水平スクロールを取得する唯一の方法は、UL が #menu よりも広い場合です。

要素の数がわからないため、UL 要素をランダムに高い幅に設定 ul {width:9000px;}して、すべてのフローティング LI 要素を 1 行に保持することができます。

また、#menu をoverflow:scrollではなくoverflow:autoに設定します。

于 2012-07-13T05:33:26.640 に答える
0

これを試して。各 li の幅を数えて var に追加し、それをメニューの幅に設定することもできます。

http://jsfiddle.net/jxA3d/

/更新/

完全に動的になるように更新しました。

于 2012-07-13T05:33:22.210 に答える