html - 将 元素扩展到屏幕之外而不是包装内容

Question

我正在努力做到 <div>包含其他较小的 <div>元素(向左浮动)从屏幕上消失，而不是环绕，但我无法弄清楚。

您可以在此处查看问题示例 - http://pictures.dnsdiag.com/

下面是我目前拥有的 CSS，这里是 JS Fiddle 的链接.谁能帮我解决这个问题。

.banner{
    background: rgba(153,153,153,0.6);
    padding: 30px 0;
    text-align: center;
}

#author-links.banner{
    text-align: left;
    overflow: hidden;
}
#author-links .author-link{
    display: block;
    float: left;
    height: 200px;
    margin: 0 20px;
    position: relative;
    width: 300px;
    z-index: 10;
}
#author-links .author-link span.preview-image{
    display: block;
    height: 200px;
    width: 300px;
}

如果有人想知道，我希望这样做的原因是我可以包含一个 jQuery 插件，允许用户滚动浏览图片(以比水平滚动条更美观的方式)。谢谢。

Answer 1

View working demo

在.banner{中添加white-space: nowrap;

在 #author-links .author-link 中将 display: block; 更改为 display: inline-block; 并删除 float :左;

.banner{
    background: rgba(153,153,153,0.6);
    padding: 30px 0;
    text-align: center;
    white-space: nowrap;
}

#author-links .author-link{
    display: inline-block;
    height: 200px;
    margin: 0 20px;
    position: relative;
    width: 300px;
    z-index: 10;
}