（自定義組件）通用- 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軸橫向：溢出滾動 （含代碼）- 案例篇 ” 的全部內容。