溢出-x：滚动似乎不起作用

Question

我很困惑为什么这不起作用。我试图在里面实现水平滚动div.queue-wrapper，所以div.queue-month如果没有足够的空间（这是他们目前所做的），请不要一个接一个地倒下。

HTML

        <div class="queue-container">
            <div class="queue-wrapper clearfix">
                <div class="queue-month">
                    1
                </div>
                <div class="queue-month">
                    2
                </div>
                <div class="queue-month">
                    3
                </div>
            </div>
        </div> <!-- .queue-container -->

CSS

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
    overflow-x: scroll;
    background: yellow;
    width: 100%;
}

.queue-month {
    width: 385px;
    float: left;
    background-color: orange;
}

jsfiddle示例

我正在使用 bootstrap 3，但由于它在小提琴中不起作用，我认为它与问题无关。

Answer 1

您可以使用空格作为 nowrap 并使用内联块显示而不是浮动：

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
    overflow-x: auto;/*changed from scroll*/
    background: yellow;
    width: 100%;
    white-space: nowrap;/*using nowrap*/
}

.queue-month {
    width: 385px;
    display: inline-block;/*instead of float:left;*/
    background-color: orange;
}

<!-- Dragable queue section -->
        <div class="queue-container">
            <div class="queue-wrapper clearfix">
                <div class="queue-month">
                    1
                </div>
                <div class="queue-month">
                    2
                </div>
                <div class="queue-month">
                    3
                </div>
            </div>
        </div> <!-- .queue-container -->