css+html横向滚动+固定宽

 没什么好说的,快上代码!

<!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>

相关推荐

  1. 横向滚动展示内容

    2023-12-19 11:20:03       44 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-19 11:20:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-19 11:20:03       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-19 11:20:03       82 阅读
  4. Python语言-面向对象

    2023-12-19 11:20:03       91 阅读

热门阅读

  1. js 数据类型

    2023-12-19 11:20:03       61 阅读
  2. tensorflow定制模型和训练算法

    2023-12-19 11:20:03       53 阅读
  3. Cookie和会话安全

    2023-12-19 11:20:03       49 阅读
  4. leetCode算法—6. N 字形变换

    2023-12-19 11:20:03       68 阅读
  5. 智能合约为什么是企业数字化转型的新引擎。

    2023-12-19 11:20:03       52 阅读
  6. Linux 系统常用命令总结

    2023-12-19 11:20:03       47 阅读
  7. SQL中 WITH AS 的使用方法

    2023-12-19 11:20:03       58 阅读
  8. ceph更换硬盘

    2023-12-19 11:20:03       62 阅读
  9. Flink源码分析 | 读取HBase配置

    2023-12-19 11:20:03       75 阅读
  10. HTML及FTL文件转换为PDF的实现方式

    2023-12-19 11:20:03       60 阅读