CSS水平滚动问题答案

【问题标题】：CSS Horizontal scroll problemCSS水平滚动问题
【发布时间】：2011-02-03 10:43:19
【问题描述】：

问题

我需要强制在 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 破解：

【问题讨论】：

标签： css horizontal-scrolling

【解决方案1】：

在您的文件夹框上使用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，现在它可以工作了。

【讨论】：

抱歉，Baz 不得不删除它，在 IE 兼容模式下，它的显示非常时髦，我更新了要显示的问题
8 岁以上的 IE 不支持 inline-block。如果您需要它在 IE 7 和更早版本中工作，您可以使用您的float:left，但是您必须为 folderWrapper 定义一个宽度，以便浮动元素不会转到下一行。如果文件夹的数量不是静态的，那么提供这个宽度就不是那么容易了。或者，您可以将 folderBox 设为 span 而不是 div，我不确定这是否会给出正确的结果，但值得一试。
另请注意，overflow-x 和 overflow-y 不受 IE 7 及更早版本的良好支持。我相信overflow 是，但它可能会提供水平和垂直滚动条。
谢谢，hack -sort 的作品 - 但它没有水平隐藏内容，所有文件夹都显示在滚动区域之外。但是你给了我一些其他的工作，谢谢。该死的 IE 浪费了我们这么多的生命。
哈哈哈，我确实会投票支持依法废除 IE7（尤其是 IE6）的人。你能用一些新的截图或者你当前的代码来更新你的问题吗？我觉得我们已经接近一个可行的解决方案，并且我也有兴趣找到适用于 IE7 的答案。

【解决方案2】：

我会像这样创建 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。

【讨论】：