0

次のhtmlコードがあります。

<html>
    <body>
        <style>
            div{border:solid 1px;}
            .cool{width:400px;height:102px; overflow:auto;}
            .cool div{width:100px;height:100px;}
        </style>
        <div class="cool">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

ここで試してみてください

垂直スクロールバーを表示していますが、水平にしたいのですが、どうすれば取得できますか?

4

3 に答える 3

3

http://jsfiddle.net/H3UWg/1/

とに追加display: inline-block_.cool divwhite-space: nowrap.cool

于 2012-05-16T12:48:28.793 に答える
1

div をブロックするのではなくインラインのままにしたい場合は、いくつかの方法があります。個人的に、私は嫌いfloat:leftです。

これを試して：

    .cool{width:400px;height:122px; overflow:auto;white-space:nowrap;}
    .cool div { width:100px;height:100px;display:inline-block;zoom:1;*display:inline; }

注:zoom:1;*display:inline;ビジネスは IE7 以下のハックです

http://jsfiddle.net/HackedByChinese/tPb2v/

于 2012-05-16T12:46:34.797 に答える
0

これはおそらくあなたが望んでいるものではないでしょう.私は他の答えがより良いと思います! ただし、別の方法として、定義済みの幅を持つ .cool 内に div を含めることもできます。

例http://jsfiddle.net/alexkey/Vs5Wk/

于 2012-05-16T12:53:00.153 に答える