如何水平滚动行项目

Question

作为练习，我正在尝试复制像 Netflix 这样的网站。 如果您看到，在 Netflix 中，每个类别都有一排水平分布的艺术视频，大多数视频位于屏幕“视口”之外，您必须单击箭头按钮才能将其余内容滚动到视图中。

我试图通过混合 Bootstrap Cards 作为视频“占位符”和 flexbox 以水平分布卡片来复制这一点。然后我想可能会使用类似旋转木马的东西，但我找不到任何有用的东西。

关于如何在不使用 javascript 的情况下执行此操作的任何建议？

谢谢

body {
	margin: 0;
	padding: 0;
}

.contain {
	display: flex;
}

.card {
	width: 200px;
	margin: 5px;
	margin-top: 5px;
	border-radius: 0;
	position: relative;
	top: 5px;
	left: 5px;
}

.card-img-top {
	border-radius: 0;
}

.card-body {
	height: 100px;
	font-size: 50%;
	text-align: center;
}

.list-group-item {
	font-size: 50%;
	border-radius: 0;
}

<div class="contain">
	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>

	<div class="card" >
		<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
		<div class="card-body">
			<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<ul class="list-group list-group-flush">
		    <li class="list-group-item">Cras justo odio</li>
	    </ul>
	</div>	
</div>

Answer 1

在这里，这应该可以工作。

    .contain {
      overflow: auto;
      white-space: nowrap;
      (your other CSS)
    }