1

不像听起来那么简单。

我有一个水平滚动的 div，里面的内容是动态的并且可能会改变。

到目前为止，我设法让它在 webkit 中正常运行，但尽我所能，它在 firefox、opera 和可能的 IE 中都无法正常工作。

结构非常简单，一个容器，一个相对定位的父级和一个内部带有列表项的 ul。

<div class="extra-holder">
    <div class="extra-holder-inner">
        <ul>        
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>               
        </ul>
    </div>
</div>  


.extra-holder {
    height: 160px;
    display: block;
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    z-index: 41;

    line-height: 1;
    background-color: white;
    position: fixed;
    border-bottom: 1px solid #d7d7d7;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
}

.extra-holder-inner {
    position: relative;
    display: inline-block;
}

.extra-holder ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.extra-holder ul li {
    margin: 0;
    padding: 0;
    float: left;
    height: 140px;
    width: 300px;
    white-space:normal;
    border-left: 1px solid #d7d7d7;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

问题是，列表项似乎换行了，我需要它们全部排成一行，用户可以滚动。

我做了一个 jsfiddle，所以你可以得到一个更好的主意。

http://jsfiddle.net/QFnVk/

在 chrome 中 - 可以在 firefox 中向左/向右滚动 - 列表项显示视口宽度允许的数量，然后在下面堆叠。

4

1 回答 1

1

在您的.extra-holder ul li规则中，尝试替换float: left;为display: inline-block;

这是您在 Firefox 中工作的更新小提琴

于 2013-06-10T13:53:04.873 回答