Html 水平滚动条不显示

我有这个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>

标题1
标题2
标题3
标题4
标题5
标题6

---

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

列元素仍然垂直堆叠，但由于

#容器

的静态高度及其

溢出-y:hidden

而看不见。这就是为什么只有当您将浏览器缩小到单个

列的宽度时才会出现水平滚动条的原因

为了弥补这一点，你走的是正确的道路。您需要使用
空白：nowrap
，这样
.column
元素将保持在同一行，并且不会垂直堆叠。但是，您需要将其应用于
.column
元素的父元素，而不是它们自己：

#container {
    white-space: nowrap;
}

把这种风格添加到你的定义中，我想它会让你得到你想要的。希望这有帮助！如果你有任何问题，请告诉我

编辑：以防你想看看它能达到什么效果，这里有一个。
适合我（Safari 6.1，FF和Chrome最新版本）。测试：为什么滚动条会显示？div是内联块元素，垂直下拉。使用Mozilla不起作用：/@j08691我在上看到了一篇文章，因此删除
float
和添加
display:inline block
，它会起作用。太好了！很高兴我能帮上忙。我在StackExchange没有任何其他帐户……不过，如果您不能发布问题，请随时给我发送私人消息。