巴中熱線

 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,訪問微社區

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

[網頁教程] html如何使網頁ul中li元素文字橫向排列且不換行

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

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

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

x
外層div容器寬度固定,ul寬度隨li(li寬度固定)的增加而撐開,但是當ul中li的寬度之和大于div時,ul沒有撐開,而是li換行了,如何使li不換行?

解決方法:
主要是外面容器設置為white-space:nowrap;li設置為display:inline-block;而不是float:left;
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #pic_list
  6. {
  7. display:block;
  8. white-space:nowrap;
  9. width:500px;
  10. overflow:auto;
  11. }
  12. #pic_list li
  13. {
  14. width:80px;
  15. height:80px;
  16. margin:3px;
  17. background:red;
  18. display:inline-block;
  19. }
  20. </style>
  21. </head>
  22. <div id="pic_list">
  23.   <ul>
  24.     <li></li>
  25.     <li></li>
  26.     <li></li>
  27.   </ul>
  28. </div>
  29. </body>
  30. </html>
復制代碼







上一篇:linux如何設置export環境變量 不輸入程序詳細路徑直接執行命令方法
下一篇:讓li在同一行只出現左右滾動條,滾動條透明,移動端就可以滑動
廣告招租  尺寸755x55 業務合作巴中熱線-網址之家 歡迎來到巴中第一人氣社區!

巴中論壇

回復

使用道具 舉報

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

本版積分規則

關閉

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

快速回復 返回頂部 返回列表
微信台湾版ios下载