问题
我需要强制内容在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>
使用一个文件夹内部框格很好地格式化：
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,现在它的工作原理.
