CSS水平滚动问题

Question

CSS水平滚动问题

csshorizontal-scrolling

6

问题

enter image description here

我需要让内容在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兼容模式下会出现以下情况：

enter image description here

使用IE hack后：

enter image description here

- Tom Gullen

2个回答

0

我会创建类似以下的HTML代码：

<div id="folderWrapper">
     <ul id="folderList">
         <li class="folderBox">...</li>
         <li class="folderBox">...</li>
         <li class="folderBox">...</li>
     </ul>
</div>

以及CSS：

#folderWrapper {
    position:relative;
    z-index:1;
    width:300px;
    overflow:hidden;
}
#folderList {
    position:absolute;
    z-index:2;
    width:20000px;
}
.folderBox {
    float:left;
}

然后在 #folderWrapper 中使用基于 jQuery 的滚动条： http://www.net-kit.com/jquery-custom-scrollbar-plugins/

我喜欢 jScrollPane。

- sunn0

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bazzz · Accepted Answer

在您的文件夹框中使用inline-block而不是float:left

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

在浮动元素上，whitespace: 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兼容模式（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中的非溢出问题在于您使用的position:relative。我将其删除以及其他一些CSS，现在它可以正常工作。