html - horizontal scrollbar with css

Question

I have the following html code:

<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

It is giving a vertical scrollbar but i want horizontal .How can i get it?

score 3 · Accepted Answer

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

Added display: inline-block to .cool div and white-space: nowrap to .cool

score 1 · Accepted Answer

If you want the divs to stay inline rather than block, there are a few ways. Personally, I hate float:left.

Try this:

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

Note: The zoom:1;*display:inline; business is an IE7 or less hack

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

score 0 · Accepted Answer

This probably isn't what you are hoping for infact I think the other answer are better! But as an alternative, you could have a containing div inside .cool that has a predefined width.

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

html - horizontal scrollbar with css

3 回答 3

Related

Reference