0

私はしばらくの間私を悩ませてきた厄介な問題を抱えています。ほとんどの場合、私はdivを持っています。これにはulが含まれ、次に一連のliが含まれます。ここにいくつかの情報源があります：

<div>
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

この画像のように、さまざまな要素が画面全体に並べて表示されるように設定しました 要素の図
。下部にスクロールバーがない場合を除きます。私がやろうとしているのは、スクロールできるようにスクロールバーを追加することです。要素がいくつあるかはわかりませんが、各ボックスのサイズとそれらの間の間隔はわかります。それでも私がやろうとしていることがわからない場合は、ここでプロジェクトをチェックしてください。私がやろうとしているのは、上部の要素の行です。横スクロールバーを付けてほしい。

4

4 に答える 4

1

あなたが参照したサイトを見ました。<li>要素はにありますがdisplay: inline-block、これは機能しません。これを試してください：現在のCSSを次のものに置き換えますul li：

ul li {
    list-style: none;
    display: table-cell;
    border: 10px solid transparent;
    border-top: none;
    border-bottom: none;
}

これにより、すべてのリスト要素が複数の行にオーバーフローするのではなく、1つの行にのみ整列します。

また、コードを追加するか、JSFiddleに追加してください。

于 2013-03-08T06:04:01.007 に答える
0

CSS：

#header-container
{
    width:100%; /* or set it to whatever you want */
    overflow-x: auto;
}

HTML：

<div id="header-container">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

終わり！

于 2013-03-08T06:06:19.077 に答える
0

に幅を指定し、それにcssプロパティをdiv適用できます。overflow:auto要素の幅がdivの幅よりも大きい場合は、スクロールバーが表示されます。

<style>
.my_div {
   width:600px;
   overflow-x:auto;
}
</style>

<div class='my_div'>
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>
于 2013-03-08T06:04:36.370 に答える
0 
<div style="overflow-x: auto; width:100%;">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

とliの

   li {
      float: left:
      // or
      display: inline;
    }
于 2013-03-08T06:05:10.660 に答える