不知道大家有没有碰到过设置了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>
改成这样之后我们发现中锋又回去了:
![](https://images2015.cnblogs.com/blog/1082990/201612/1082990-20161221210019479-1311864504.png)
但是将他们都放在一行的这种做法非常影响代码的可读性,我们可以将它改成这样:
<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/)中第六部分的表格,也可以在自己的代码中进行试验,直到试出合适的值为止。
这几种方法基本上能够解决实际开发当中的大部分问题,当然还有许多其它的解决方案,也欢迎大家留下更加神奇的方法!