添加 inline-block 后：
查询、借鉴的原网址：http://www.zhangxinxu.com/wordpress/?p=2357
html 结构：
<ul class="ul" id="ul"> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> </ul>
一、直接源代码删除空格
如：
<ul class="ul" id="ul"> <li><a href="#">Link one</a></li><!-- --><li><a href="#">Link two</a></li> </ul>
此方式，直接删除了，但个人觉得，若代码多，会显得乱。
二、使用margin负值
在 li 上添加 margin-left: 负值; ，这个不同浏览器需要负的数值不一样，使用起来不方便。
三、使用 font-size 大小控制
.ul { font-size:0; } .ul li a { font-size: 16px; }
这个方法最简单的感觉，但是 好像 IE7 有些不支持 。( 尝试使用 *display: inline; 让其实现，IE7 不把持 display: inline-block; )
四、使用 letter-spacing 或 word-spacing
.ul { letter-spacing: -4px; } .ul li a { letter-spacing:0; }
简单总结一下解决 添加 inline-block 后多出来的空隙
原文：http://www.cnblogs.com/JaneBlog/p/7454620.html