移動端tabbar按鈕滑動(給div加橫向滾動條)
阿新 • • 發佈:2018-12-16
手寫程式碼乾貨,已測試(請在移動端中開啟除錯)
<!DOCTYPE html> <html> <head> <title>底部tabbar欄滑動</title> <script type="text/javascript"> </script> <style type="text/css"> .bottom{ position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; background-color: #ccc; overflow-x: scroll; white-space: nowrap; } .bottom .item{ width: 25%; height: 100%; background-color: blue; /*float: left;*/ /*注意:一定不要設定浮動*/ display: inline-block; text-align: center; line-height: 150px; color: orange; font-size: 32px; } </style> </head> <body> <div class="bottom"> <div class="item"> 條目1 </div> <div class="item"> 條目2 </div> <div class="item"> 條目3 </div> <div class="item"> 條目4 </div> <div class="item"> 條目5 </div> </div> </body> </html>