CSS——水平(横向滚动条)

最新推荐文章于 2026-03-30 09:35:52 发布

原创最新推荐文章于 2026-03-30 09:35:52 发布 · 3.2w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css 横向水平滚动条

收录于

css 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的水平滚动图片列表布局方案。通过限制ul元素的宽度和高度，并设置overflow属性来实现水平滚动效果，同时利用display:inline-block使列表项并排显示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul {
			width: 200px;
			height: 100px;
			overflow-x: scroll;
			overflow-y: hidden;
			white-space:nowrap;  /* ul中的内容不换行 */
		}
		ul li {
			display: inline-block;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<img src="images/p_small_001.jpg" alt="">
		</li>
		<li>
			<img src="images/p_small_002.jpg" alt="">
		</li>
		<li>
			<img src="images/p_small_003.jpg" alt="">
		</li>
		<li>
			<img src="images/p_small_004.jpg" alt="">
		</li>
	</ul>
</body>
</html>