作者banana2014 (香蕉共和国)
看板Web_Design
标题[问题] 请问如何解决li和ol左侧之间的留白?
时间Thu Jan 7 18:46:57 2016
以下是把<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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1452163620.A.E97.html
1F：推 Canboo: 请css reset,你这少把padding归零 01/07 18:57
2F：推 Hevak: 就padding不等於0，拿网页开发者工具指上去元素应该就看得 01/07 19:59
3F：→ Hevak: 出来 01/07 19:59
4F：推 banjames: ul或ol的padding设为0; 手刻个几次就会明白了 01/08 16:39
5F：推 sjlxup6: 我想原PO应该还没解决，这是inline-block的bug 01/11 02:03
6F：→ sjlxup6: 相邻同层的inline-block元素 会在浏览器产生4px的空白 01/11 02:04
7F：→ sjlxup6: 这是webkit碰到inline-block後的断行字元产生的溢位 01/11 02:05
8F：→ sjlxup6: 可以估狗搜寻inline block space 有很多解法 01/11 02:06
9F：→ sjlxup6: 一般的reset套件或framework都会事先处理好 01/11 02:07
10F：推 sjlxup6: 最简单的解法就是把所有li放在同一行... 01/11 02:12
11F：推 Hevak: 或者要放在不同行的话就把closing的那个>断到下一行去 01/11 14:45
12F：→ Hevak: 像是： 01/11 14:46
13F：→ Hevak: <li class="link">项目A</li 01/11 14:46
14F：→ Hevak: ><li class="link">项目B</li> 01/11 14:46