没什么好说的，快上代码！
<!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>
![[计网00] 计算机网络开篇导论](https://img-blog.csdnimg.cn/direct/5406f43cd4dc444e8c89e5ce4cd49a6f.png)
