[转]简单总结一下解决添加 inline-block 后多出来的空隙

添加 inline-block 后：

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:;

}

.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:;

}

巴特西