问题
我需要强制内容在X轴上滚动,而不是在Y轴上滚动.
我知道这格式很糟糕但它是动态生成的并且没有空格.
<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,现在它的工作原理.
