不知道大家有没有碰到过设置了display:inline-block;的几个相邻元素之间有几px间距的问题，这里提供几种简单实用的解决方法，希望能够帮到大家！ 方法1. 将<li>标签之间的空格与换行全部去掉，这也是我比较常用的一种方法 原html代码：
<ul>
<li>控球后卫</li>
<li>得分后卫</li>
<li>小前锋</li>
<li>大前锋</li>
<li>中锋</li>
</ul>
css代码：
* {
margin:;
padding:;
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:;
}
这样也能解决问题，其中，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/）中第六部分的表格，也可以在自己的代码中进行试验，直到试出合适的值为止。 这几种方法基本上能够解决实际开发当中的大部分问题，当然还有许多其它的解决方案，也欢迎大家留下更加神奇的方法！
