make a single row of divs with horizontal scroll bars

Question

Ok so I thought I had this fixed using white-space:no-wrap it worked in chrome but nothing else.

I have something like this:

         


        
                      

              相关标签:
       
      

Answer 1

You need to set you div.inner width to something absolute like 64px and the make your lis float to either right or left and then set the overflow-x property of your parent div to auto. check this fiddle

Answer 2

You need to put one massive horizontal div inside the parent div with overflow: auto; This will allow the to float left without wrapping to the next line, and it will only scroll when the boundary of the parent div is crossed.

Answer 3

Write like this:

.outer{
    width:400px;
    overflow:auto;
    white-space:nowrap;
}
.outer li{
    display: inline-block;
    *display: inline;/*For IE7*/
    *zoom:1;/*For IE7*/
    vertical-align:top;
    width:40px;
    margin-right:20px;
    background:red;
    white-space:normal;
}

Check this http://jsfiddle.net/ZrpHv/

Answer 4

Well I know every good and purist webdeveloper will hate me (and I hate me when I post something like that) but you can simply use table to do that.

this runs in all browsers. Yes, it is not standard, no it is not CSS. But... productivity is sometime better than standard.

You could also used a fixed div width for your container (ul). and use float left position for all your children