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

作者: banana2014 (香蕉共和國)   2016-01-07 18:46:57
以下是把<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>
作者: Canboo (啃布先生)   2016-01-07 18:57:00
請css reset,你這少把padding歸零
作者: Hevak (Arthow Eshes)   2016-01-07 19:59:00
就padding不等於0,拿網頁開發者工具指上去元素應該就看得出來
作者: banjames (為什麼大家都叫James)   2016-01-08 16:39:00
ul或ol的padding設為0; 手刻個幾次就會明白了
作者: sjlxup6 (遠遠的)   2016-01-11 02:03:00
我想原PO應該還沒解決,這是inline-block的bug相鄰同層的inline-block元素 會在瀏覽器產生4px的空白這是webkit碰到inline-block後的斷行字元產生的溢位可以估狗搜尋inline block space 有很多解法一般的reset套件或framework都會事先處理好最簡單的解法就是把所有li放在同一行...
作者: Hevak (Arthow Eshes)   2016-01-11 14:45:00
或者要放在不同行的話就把closing的那個>斷到下一行去像是:<li class="link">項目A</li><li class="link">項目B</li>

Links booklink

Contact Us: admin [ a t ] ucptt.com