如下圖,實現的目的就是如果有多個tab標籤,但是佈局只能顯示三個,其餘的往後排列,可以滑動找到。
實現代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maxi-mum-scale=1.0,user-scalable=no"
name="viewport" />
<title>左右拖動</title>
</head>
<style>
.box {
display: -webkit-box;
overflow: auto;
/*適應蘋果*/
-webkit-overflow-scrolling: touch;
}
.bq {
list-style: none;
font-size: 22px;
margin: 10px 30px 15px 10px;
}
/*隱藏滾動條 測試谷歌瀏覽器沒有下面這一條也會自動隱藏*/
.box::-webkit-scrollbar {
width: 0;
}
</style>
<body>
<ul class="box">
<li class="bq">Tab欄目1</li>
<li class="bq">Tab欄目2</li>
<li class="bq">Tab欄目3</li>
<li class="bq">Tab欄目4</li>
</ul>
</body>
</html>