Question

我有以下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>

Try it here

它给出了一个垂直滚动条但我想要水平。我怎么能得到它？

Answer 1

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

将display: inline-block添加到.cool div，将white-space: nowrap添加到.cool

Answer 2

如果你想让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/

Answer 3

这可能不是你希望的事实我认为其他答案更好！但作为替代方案，您可以在.cool中包含一个具有预定义宽度的div。

e.g。 http://jsfiddle.net/alexkey/Vs5Wk/

水平滚动条与CSS

3 个答案: