巴中熱線

 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,訪問微社區

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

[網頁教程] 如何讓html特效的多個li排版居中于ul中間

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

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

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

x
如何讓html特效的多個li排版居中于ul中間

方法一:利用margin-left設置

比如側邊欄的div寬300px;我有四個li,每個設置height:30px;width:60px;并讓這四個li位于側邊欄的頭部;就可以設置ul的margin-left:80px;
這樣就會使四個li居于中間;如果想使四個li之間有間隔?梢栽O置li的margin-left:5px;這樣就需要改變先前ul的margin-left為(300-240-20)/2-2.5,因為margin-left是透明的,所以才會有上面這個計算式子?梢娍赡軙霈F小數,這樣是我們要避免的。利用ul的margin-left很簡單地設置居中。
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>li居中顯示</title>
  6. <style>
  7. #diva{
  8. width:300px;
  9. height:300px;
  10. background-color: #00ff99;
  11. }
  12. #ula{
  13. display: table;
  14. margin-left: 50px;
  15. height:40px;
  16. text-align: center;
  17. padding:0;
  18. }
  19. .lia{
  20. float: left;
  21. margin-left: 5px;
  22. padding:0;
  23. width:50px;
  24. height:30px;
  25. line-height: 60px;
  26. font-size: 14px;
  27. background-color: yellow;
  28. list-style-type: none;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="diva">
  34. <ul id="ula">
  35. <li class="lia">11111</li>
  36. <li class="lia">22222</li>
  37. <li class="lia">33333</li>
  38. <li class="lia">44444</li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
復制代碼

在這個方法中,我們可以設置ul的高和寬,但只要不讓ul的寬超過div的寬,以及不讓ul的寬低于四個li的和的寬,就不會出現排版錯誤。

方法二:利用ul的text-align:center屬性,好用有效
首先要說的是,設置ul的display:table,text-align:center。
是不是覺得好神奇,怎么會出現display:table,說實話,這也是我第一次用到這個屬性,雖然知道有這個屬性,但一般還真不用,我們似乎只用none,inline和block,但這里我們必須用這個屬性,不然解決不了。下面是一段代碼:
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>li居中顯示</title>
  6. <style>
  7. #div1{
  8. width:500px;
  9. height:500px;
  10. background-color: red;
  11. }
  12. #ul1{
  13. display: table;
  14. margin:0 auto;
  15. height:40px;
  16. text-align: center;
  17. padding:0;
  18. }
  19. .li1{
  20. float: left;
  21. margin-left: 5px;
  22. padding:0;
  23. width:70px;
  24. height:60px;
  25. line-height: 60px;
  26. font-size: 20px;
  27. background-color: yellow;
  28. list-style-type: none;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="div1">
  34. <ul id="ul1">
  35. <li class="li1">11111</li>
  36. <li class="li1">22222</li>
  37. <li class="li1">33333</li>
  38. <li class="li1">44444</li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
復制代碼

這段代碼可以解決居中方法,注意:ul設為display:table;text-align:center;但記住千萬千萬不可以設置ul的寬,不然無法實現。



上一篇:讓li在同一行只出現左右滾動條,滾動條透明,移動端就可以滑動
下一篇:linux系統計劃任務設置方法詳解,按時執行命令和腳本
廣告招租  尺寸755x55 業務合作巴中熱線-網址之家 歡迎來到巴中第一人氣社區!

巴中論壇

回復

使用道具 舉報

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

本版積分規則

關閉

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

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