css+html横向滚动+固定宽

2023-12-18 23:20:59

?没什么好说的，快上代码！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>
	.box{
		border:1px solid  #ccc;
		width:900px;  
		height:150px;
		margin: 300px 	auto;
		white-space:nowrap;
		overflow-x: scroll;
	}
	.item{
		/* display: flex;
		flex-shrink: 0; 禁用收缩 */
		display: inline-block;
		background:#36d;
		width: 300px;
		height:100px;
		border:1px solid #eee;
	}
</style>
<body>
	<!-- 
		横向滚动子属性固定宽度
	 -->
	<div class="box">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</body>
</html>

文章来源:https://blog.csdn.net/m0_73358221/article/details/135072146
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。