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＃容器。

Answer 1

.column元素仍然垂直堆叠，但由于#container及其overflow-y:hidden的静态高度，它们只是在视线之外。这就是为什么仅当您将浏览器缩小到单个.column的宽度时才会出现水平滚动条。

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

#container {
    white-space: nowrap;
}

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

编辑：如果你想看看它取得了什么，这里是JSFiddle。

水平滚动条未显示

1 个答案: