[問題] 請問如何解決li和ol左側之間的留白?

看板Web_Design作者 (香蕉共和國)時間9年前 (2016/01/07 18:47), 編輯推噓6(608)
留言14則, 4人參與, 最新討論串1/1
以下是把<li> inline之後的結果,左側(項目A外的紅框和綠框之間)還是有留白的現象,請 問該如何消除? <style> .table {display: table; margin: 0 auto;} ol.links {list-style-type: none; border: 1px solid #0f0;} li.link {display: inline-block; font-size: 16px; border: 1px solid #f00;} </style> <div class="table"> <ol class="links"> <li class="link">項目A</li> <li class="link">項目B</li> <li class="link">項目C</li> <li class="link">項目D</li> <li class="link">項目E</li> </ol> </div> -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 120.109.151.203 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1452163620.A.E97.html

01/07 18:57, , 1F
請css reset,你這少把padding歸零
01/07 18:57, 1F

01/07 19:59, , 2F
就padding不等於0,拿網頁開發者工具指上去元素應該就看得
01/07 19:59, 2F

01/07 19:59, , 3F
出來
01/07 19:59, 3F

01/08 16:39, , 4F
ul或ol的padding設為0; 手刻個幾次就會明白了
01/08 16:39, 4F

01/11 02:03, , 5F
我想原PO應該還沒解決,這是inline-block的bug
01/11 02:03, 5F

01/11 02:04, , 6F
相鄰同層的inline-block元素 會在瀏覽器產生4px的空白
01/11 02:04, 6F

01/11 02:05, , 7F
這是webkit碰到inline-block後的斷行字元產生的溢位
01/11 02:05, 7F

01/11 02:06, , 8F
可以估狗搜尋inline block space 有很多解法
01/11 02:06, 8F

01/11 02:07, , 9F
一般的reset套件或framework都會事先處理好
01/11 02:07, 9F

01/11 02:12, , 10F
最簡單的解法就是把所有li放在同一行...
01/11 02:12, 10F

01/11 14:45, , 11F
或者要放在不同行的話就把closing的那個>斷到下一行去
01/11 14:45, 11F

01/11 14:46, , 12F
像是:
01/11 14:46, 12F

01/11 14:46, , 13F
<li class="link">項目A</li
01/11 14:46, 13F

01/11 14:46, , 14F
><li class="link">項目B</li>
01/11 14:46, 14F
文章代碼(AID): #1MZa8awN (Web_Design)
文章代碼(AID): #1MZa8awN (Web_Design)