纯css实现移动端横向滑动列表

最新推荐文章于 2024-06-03 09:07:55 发布

zhouyyh

最新推荐文章于 2024-06-03 09:07:55 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/zzzz1553110890/article/details/85011534

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <title>横向滑动</title>
<style type="text/css">
#segmentedControl{
   width: auto;
   white-space:nowrap;/*不换行*/
margin-top: 20px;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
#segmentedControl::-webkit-scrollbar { width:0; height:0; display: none;}
#segmentedControl .control-item{
width: auto;
margin-right: 10px;
display: inline-block;
}
#segmentedControl .control-item:last-child{margin-right:0;}
</style>
</head>
<body>
   <div id="segmentedControl">
       <a class="control-item active">全部</a>
       <a class="control-item">待付款</a>
       <a class="control-item">待发货</a>
       <a class="control-item">待收货</a>
       <a class="control-item">待评价</a>
       <a class="control-item">退款/售后</a>
   </div>
</body>
</html>

zhouyyh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css实现移动端横向滑动列表

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scal
复制链接

扫一扫

专栏目录