水平滚动条不显示

Question

我有这个 CSS 代码：

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F2F1EF;
    font-family: Arial, sans-serif;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
#container {
    height:40px;
    overflow-x:auto;
    overflow-y:hidden;
}
.column {
    display:inline-block;
    white-space: nowrap;
    width:300px;
}
.post {
    height:40px;
}

和HTML如下：

<div id="container">
    <div class="column">
        <div class="post">
            <h1>Heading 1</h1>
        </div>
    </div>
    <div class="column">
        <div class="post">
            <h1>Heading 2</h1>
        </div>
    </div>
    <div class="column">
        <div class="post">
            <h1>Heading 3</h1>
        </div>
    </div>
    <div class="column">
        <div class="post">
            <h1>Heading 4</h1>
        </div>
    </div>
    <div class="column">
        <div class="post">
            <h1>Heading 5</h1>
        </div>
    </div>
    <div class="column">
        <div class="post">
            <h1>Heading 6</h1>
        </div>
    </div>
</div>

如果容器中有更多列，我会尝试显示水平滚动条，但它会隐藏溢出内容。我的身体现在只有这个 div#container。

Answer 1

.column 元素仍然垂直堆叠，但由于#container 及其overflow-y:hidden 的静态高度，它们只是看不见了。这就是为什么只有将浏览器缩小到单个.column 的宽度时才会出现水平滚动条的原因。

为了解决这个问题，好吧，你走在了正确的轨道上。您需要使用white-space:nowrap 以便.column 元素将保持在同一行，并且不会垂直堆叠。您需要将其应用于 .column 元素的父元素，而不是它们自己：

#container {
    white-space: nowrap;
}

将此样式添加到您的定义中，我认为它会得到您想要的。希望这可以帮助！如果您有任何问题，请告诉我。

编辑：以防万一你想看看它取得了什么成果，这里是JSFiddle。