inline-block元素间距问题的几种解决方案

　　不知道大家有没有碰到过设置了display:inline-block;的几个相邻元素之间有几px间距的问题，这里提供几种简单实用的解决方法，希望能够帮到大家！

 

　　方法1. 将<li>标签之间的空格与换行全部去掉，这也是我比较常用的一种方法

　　原html代码：

<ul>
    <li>控球后卫</li>
    <li>得分后卫</li>
    <li>小前锋</li>
    <li>大前锋</li>
    <li>中锋</li>
</ul>

　　css代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #bbb;
}
ul {
    list-style: none;
    width: 800px;
    height: 40px;
    background: #BF0D0D;
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    margin: 50px;
}
ul li {
    display: inline-block;
    width: 160px;
    text-align: center;
    border-right: 1px solid #8E0303;
}
ul li:last-child {
    border-right: none;
}

　　运行效果：

　　我们发现li的宽度160px乘以5不就等于ul的宽度800px吗，那为什么“中锋”这个li还被挤下来了，难道是小球时代传统中锋被集体抛弃的原因吗？哈哈当然不是，这其实是由于inline-block的特性导致，只要是存在空格或者换行的相邻inline-block元素，显示出来就会有几个px的间距。那我们对html结构作以修改：

<ul>
    <li>控球后卫</li><li>得分后卫</li><li>小前锋</li><li>大前锋</li><li>中锋</li>
</ul>

　　改成这样之后我们发现中锋又回去了：

　　但是将他们都放在一行的这种做法非常影响代码的可读性，我们可以将它改成这样：

<ul>
    <li>控球后卫</li><!--
    --><li>得分后卫</li><!--
    --><li>小前锋</li><!--
    --><li>大前锋</li><!--
    --><li>中锋</li>
</ul>

　　也就是在相邻的元素之间加上空白的html注释，变相地取消了他们之间的空白节点。还有其他的几种改法这里不一一列举，大家也可以自由发挥，只要是取消了相邻元素之间的空白节点就能达到目的。

 

　　方法2. 去掉结束标签

　　如下：

<ul>
    <li>控球后卫
    <li>得分后卫
    <li>小前锋
    <li>大前锋
    <li>中锋
</ul>

　　这样也能得到理想中的结果，但如果要兼容低版本IE，最后一个列表项的结束标签还是要加上的。

 

　　方法3. 使用负边距

　　改动代码如下，其他代码不变：

ul li {
    display: inline-block;
    width: 160px;
    text-align: center;
    border-right: 1px solid #8E0303;
    margin-right: -10px;
}
ul li:last-child {
    border-right: none;
    margin-right: 0;
}

　　这样也能解决问题，其中，margin-right的大小并不是固定的，它和字体大小以及字体都有关系，大家可以查阅张鑫旭老师的一篇博客（http://www.zhangxinxu.com/wordpress/2010/11/%e6%8b%9c%e6%8b%9c%e4%ba%86%e6%b5%ae%e5%8a%a8%e5%b8%83%e5%b1%80-%e5%9f%ba%e4%ba%8edisplayinline-block%e7%9a%84%e5%88%97%e8%a1%a8%e5%b8%83%e5%b1%80/）中第六部分的表格，也可以在自己的代码中进行试验，直到试出合适的值为止。

 　　这几种方法基本上能够解决实际开发当中的大部分问题，当然还有许多其它的解决方案，也欢迎大家留下更加神奇的方法！