Question

不像听起来那么简单。

我有一个水平滚动的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/

镀铬中的

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

Answer 1

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

以下是您在Firefox中使用的updated fiddle

水平滚动div和子元素的定位

1 个答案: