CSS水平滚动问题

问题

我需要强制内容在X轴上滚动,而不是在Y轴上滚动.

HTML

我知道这格式很糟糕但它是动态生成的并且没有空格.

<div class="folderWrapper" id="folderContainer"><div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"><div class="counter" id="fCount0">4</div><div class="folderName">Unsorted</div></div><div class="folderBox ui-droppable" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div></div>

使用一个文件夹内部框格很好地格式化：

<div class="folderWrapper" id="folderContainer">
    <div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0">
        <div class="counter" id="fCount0">4</div>
        <div class="folderName">Unsorted</div>
    </div>
</div>

CSS

.folderWrapper{
    overflow-x:scroll;
    overflow-y:hidden;
    height:85px;
    white-space:Nowrap;
    margin-bottom:5px;
}
.folderBox{
    float:left;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
    position:relative;
    padding:5px;
    z-index:4;
    white-space:Nowrap;
}
.folderBox:hover{
    cursor: pointer;
}

谢谢,如果有人可以帮助！

编辑

Bazzz的答案适用于所有浏览器,除了IE兼容模式(不幸的是它必须兼容),它具有以下外观：

随着IE黑客：

解决方法

在你的folderBox上使用inline-block而不是float：left

.folderBox{
    float: left; /* remove this line */
    display: inline-block; /* add this line */
}

空白：no-wrap不适用于浮动元素,它适用于内联元素.

对于IE 7,我发现了一个可以帮助你的小黑客：

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

试试这个css：

.folderBox{
 display: inline-block;
 zoom: 1;
 *display: inline;
 }

最近编辑：

此css适用于IE 8 compat模式(IE7标准)：

.folderWrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    height:85px;
    width: 300px; /* not really your css,I used it in my test case */
    white-space:Nowrap;
}
.folderBox{
    display: inline-block;
    zoom: 1;
    *display: inline;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
}

我相信IE7中的非溢出问题在于：您使用的相对位置.我删除它,和其他一些CSS,现在它的工作原理.

原文地址：https://www.jb51.cc/css/214022.html