大div中有多个div，这些div在同一行显示，溢出后产生滚动条而不换行

最新推荐文章于 2024-07-09 23:24:46 发布

原创最新推荐文章于 2024-07-09 23:24:46 发布 · 2.6k 阅读

4 ·

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

标签

#前端 #css #javascript

收录于

html+css的一些乱七八糟的问题专栏收录该内容

3 篇文章

订阅专栏

之前有一个需求，大div中有多个div，这些div在同一行显示，正常情况下，要么会溢出撑满，要么换行。但是我们如何实现溢出后产生滚动条而不换行呢？
![在这里插入图片描述](https://img-blog.csdnimg.cn/f0795bd445bc4867ab900bb808b882fd.png
解决办法：

<style type="text/css">
.mt {
	width: 600px;
	height: 200px;
	overflow: auto;
}
.mk {
	white-space: nowrap;
}
.mj {
	width: 150px;
	height: 150px;
	border: 1px solid #999;
	display: inline-block;
}
</style>
</head>
<body>
<div class="mt">
	<div class="mk">
		<div class="mj"></div><div class="mj"></div><div class="mj"></div><div class="mj"></div><div class="mj"></div><div class="mj"></div><div class="mj"></div><div class="mj"></div><div class="mj"></div>
	</div>
</div>
</body>