水平滚动条不显示

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。