听起来并不简单。

我有一个水平滚动的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中-列表项显示的视口宽度尽可能多,然后堆叠在下方。

最佳答案

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

这是您在Firefox中工作的updated fiddle

关于css - 水平滚动div和子元素的定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17025054/

10-12 12:50
查看更多