(自定义组件)通用- X轴横向:溢出滚动 (含代码)- 案例篇
- 移动端和pc端通用
效果截图:
实例代码:
<!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" />
<title></title>
<style type="text/css">
body{background: ;}
.wither-card {
font-size: 14px;
position: relative;
overflow: hidden;}
.wither-card-footer{
color: #6d6d72;
position: relative;
min-height: 44px;
padding: 10px 15px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row ;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;}
.overflw-x {
overflow-x: scroll;
border-radius: 0;
}
.witag {
background: #FFF;
color: #999999;
border-color: #999999;
padding: 0 10px;
font-size: 12px;
height: 20px;
line-height: 18px;
margin-right: 10px;
border-radius: 10px;
display: inline-block;
text-align: center;
vertical-align: top;
white-space: nowrap;
font-weight: 400;}
</style>
</head>
<body>
<div class="wither-card" style="border-radius: 0;margin: 0;box-shadow:none;width: 100%;">
<div class="wither-card-footer overflw-x">
<a class="mui-btn witag" onclick="webjsp(28,'tag')" id="witag_28">考试经验</a>
<a class="mui-btn witag" href="">辅导精华</a>
<a class="mui-btn witag on" href="">考试动态</a>
<a class="mui-btn witag" href="">考试大纲</a>
<a class="mui-btn witag" href="">考试时间</a>
<a class="mui-btn witag" href="">取证事项</a>
<a class="mui-btn witag" href="">复审查验</a>
</div>
</div>
</body>
</html>
以上就是关于“ 移动端(自定义组件)- X轴横向:溢出滚动 (含代码)- 案例篇 ” 的全部内容。