如何 - 水平可滚动图片库
了解如何使用 CSS 创建带有水平滚动条的图片库。
带水平滚动的图片库
使用水平滚动条查看其他图片





创建带水平滚动的图片库
步骤 1) 添加 HTML
示例
<div class="scroll-container">
<img src="img_5terre.jpg" alt="五渔村">
<img src="img_forest.jpg" alt="森林">
<img src="img_lights.jpg" alt="北极光">
<img src="img_mountains.jpg" alt="山脉">
</div>
步骤 2) 添加 CSS
示例
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
自己试试 »
提示:访问我们的HTML 图片教程了解更多关于图片的信息。
提示:访问我们的CSS 样式图片教程了解更多关于如何设置图片样式的信息。