巴中熱線

 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,訪問微社區

查看: 2119|回復: 0
打印 上一主題 下一主題

[網頁教程] 讓li在同一行只出現左右滾動條,滾動條透明,移動端就可以滑動

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2019-9-3 00:22:45 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

注冊巴中熱線論壇,交好友享優惠,衣食住行吃喝玩樂盡在 BZHOT.com

您需要 登錄 才可以下載或查看,沒有帳號?立即注冊

x
網頁特效:
讓li在同一行只出現左右滾動條,滾動條透明,移動端就可以滑動啦

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ::-webkit-scrollbar {color:transparent;}
  6. #pic_list
  7. {
  8. display:block;
  9. white-space:nowrap;
  10. width:500px;
  11. overflow:auto;
  12. }
  13. #pic_list li
  14. {
  15. width:80px;
  16. height:80px;
  17. margin:3px;
  18. background:red;
  19. display:inline-block;
  20. }
  21. </style>
  22. </head>
  23. <div id="pic_list">
  24. <ul>
  25. <li></li>
  26. <li></li>
  27. <li></li>
  28. <li></li>
  29. <li></li>
  30. <li></li>
  31. </ul>
  32. </div>
  33. </body>
  34. </html>
復制代碼







上一篇:html如何使網頁ul中li元素文字橫向排列且不換行
下一篇:如何讓html特效的多個li排版居中于ul中間
回復

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

關閉

巴中熱線 - 精彩推薦上一條 /1 下一條

快速回復 返回頂部 返回列表
15选5全包