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

时间:2023-01-21 19:44:35
  不知道大家有没有碰到过设置了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;
}

  运行效果:

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

  我们发现li的宽度160px乘以5不就等于ul的宽度800px吗,那为什么“中锋”这个li还被挤下来了,难道是小球时代传统中锋被集体抛弃的原因吗?哈哈当然不是,这其实是由于inline-block的特性导致,只要是存在空格或者换行的相邻inline-block元素,显示出来就会有几个px的间距。那我们对html结构作以修改:
<ul>
<li>控球后卫</li><li>得分后卫</li><li>小前锋</li><li>大前锋</li><li>中锋</li>
</ul>
  改成这样之后我们发现中锋又回去了:
inline-block元素间距问题的几种解决方案
  但是将他们都放在一行的这种做法非常影响代码的可读性,我们可以将它改成这样:
<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/)中第六部分的表格,也可以在自己的代码中进行试验,直到试出合适的值为止。
   这几种方法基本上能够解决实际开发当中的大部分问题,当然还有许多其它的解决方案,也欢迎大家留下更加神奇的方法!