我有这个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＃容器。
该.column元件仍然垂直堆叠，但都只是淡出人们的视线，因为静态的高度#container和它的overflow-y:hidden。这就是为什么仅在将浏览器缩小到单个宽度时才会显示水平滚动条的原因.column。
要解决这个问题，那么您在正确的道路上。您需要使用white-space:nowrap以便.column元素将保持在同一行上，并且不会垂直堆叠。不过，您需要将其应用于.column元素的父级，而不是应用于自身：
#container {
white-space: nowrap;
}
将此样式添加到您的定义中，我认为它将为您带来所需的东西。希望这可以帮助！如果您有任何问题，请告诉我。
编辑：以防万一，您想看看这能实现什么，这是一个JSFiddle。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句