如下HTML代码:
<ul>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ul>
则将li设置属性display:inline-block后,li之间会有一些间隙,Chrome下为6px ,为消除这些间隙,可以采用以下方式:
- 暴力将回车删除
- 采用负margin
- 设置ul的font-size为0后,重新设置li的font-size
- 将HTML写成下面的格式:
<ul>
<li>12345</li><li>
12345</li><li>
12345</li><li>
12345</li><li>
12345</li>
</ul>
- 不写li的闭合标签,浏览器会自动加上,并没有回车。
这是为啥子捏?
换行符也是一个普通字符嘛,所以解决办法就是要让这个字符消失
- ul的font-size设为0当然没问题了
- 也可以让ul的letter-spacing为负数,li的letter-spacing为0