移动端滑动导航条

最新推荐文章于 2022-11-20 10:35:09 发布

这个杀手好冷

最新推荐文章于 2022-11-20 10:35:09 发布

阅读量495

点赞数 1

分类专栏：前端文章标签：移动端滑动导航条

本文链接：https://blog.youkuaiyun.com/qq_43649479/article/details/84984509

版权

前端专栏收录该内容

26 篇文章

订阅专栏

HTML

<div class="tab">
			<div class="table-item">
				<p>二维码</p>
				<p>10</p>
			</div>
			<div class="table-item">
				<p>助理活动</p>
				<p>10</p>
			</div>
			<div class="table-item">
				<p>红包活动</p>
				<p>10</p>
			</div>
			<div class="table-item">
				<p>其他入口</p>
				<p>10</p>
			</div>
			<div class="table-item">
				<p>首页</p>
				<p>10</p>
			</div>
			<div class="table-item">
				<p>首页</p>
				<p>10</p>
			</div>
		</div>

css

.tab {
			    white-space: nowrap; 
			    height: 3rem;
			    overflow-y: hidden; 
			}
			.tab .table-item {
				width: 5rem;
			    padding-right: 0.133333333333333rem;
			    display: inline-block; 
			    text-align: center;
			}
			.tab .table-item>p{
				margin: 0;
				font-family: PingFangSC-Regular;
				font-size: 13px;
				color: lawngreen;
			}