css实现横向滚动播放 |css 设置打印样式

.scroll-wrapper {
white-space: nowrap;
overflow-x: scroll;
}
.scroll-item {
display: inline-block;
width: 200px;
height: 200px;
}

首先，大家需要把包含需要滚动的元素的 div 容器设置为 nowrap。这会使内容横向排列，并且超出容器宽度的内容会被隐藏。接着，把 overflow-x 设置为 scroll，这样就可以启用横向的滚动条了。

然后，大家需要为每个滚动元素设置 display: inline-block，这可以使这些元素列成一行，如果用默认的块级元素 div，它们会“堆叠”在一起。此外，大家还可以为每个滚动元素设置宽度和高度。这非常重要，因为只有当所有元素宽度相等时，才能保证它们能正确地切换位置。

最后，只需要在 div 容器中添加所需的滚动元素即可，它们将自动排列成一行，通过滚动条来浏览。例如：

<div class="scroll-wrapper">
<div class="scroll-item">1</div>
<div class="scroll-item">2</div>
<div class="scroll-item">3</div>
<div class="scroll-item">4</div>
<div class="scroll-item">5</div>
</div>

以上代码将会生成一个包含 5 个滚动元素的滚动条。您可以根据自己的需要添加任意数量的滚动元素。