之前也没怎么在意,在开发Yawrap的时候发现转为inline-block元素后会出现空隙,比如:

<style type="text/css">
  body{
    padding: 0;
    margin: 0;
  }
  div{
    height: 30px;
    background: #39c;
  }
  a{
    display: inline-block;
    width: 20%;
    line-height: 30px;
    background: green;
    text-align: center;
  }
</style>
<div>
    <a href="#">栏目一</a>
    <a href="#">栏目二</a>
    <a href="#">栏目三</a>
    <a href="#">栏目四</a>
    <a href="#">栏目五</a>
</div>

去除使用了inline-block产生的空隙

看到空隙了没有,我们可以用一些方法把空隙消掉。

拿上面的例子来说,其实只要各个a标签之间不要留有空格及换行就好了,但是那样的话影响美观,降低代码的可读性,这样的话我们可以这样:

    ...
    <a href="#">栏目一</a
    <a href="#">栏目二</a
    <a href="#">栏目三</a
    <a href="#">栏目四</a
    <a href="#">栏目五</a>
    ...

或者这样(不建议这样不写结束标签):

    ...
    <a href="#">栏目一
    <a href="#">栏目二
    <a href="#">栏目三
    <a href="#">栏目四
    <a href="#">栏目五</a>
    ...

去除使用了inline-block产生的空隙

这样做只是可以暂时性的解决这个问题,因为每次遇到这种问题都要这样写才行,有良好编码习惯的我们看着就受不了哇,治标不治本又不行,那么我们怎么做才能一劳永逸呢?

... ...

没错,用css来控制!我们可以给它个负的margin值,margin: 0 -2px; 这样经我测试在不同的浏览器下会有兼容性问题:

这是在谷歌 火狐 IE9以上版本浏览器的效果

这是在用户使用的比较多的360 2345等等浏览器Chrome内核(急速模式)下的效果

明显这种方法还是不可行的。

 

还记得我们写一个导航的时候用ul li怎么写的嘛,我们通常会给li一个float: left; 它就自动像上面的效果一样排列整齐,没有空隙了,这是我研究这个问题试过最好的方法,记得清除浮动哦。

 

你还有其他解决这个问题的方法嘛,欢迎留言赐教哦。

最后修改:2019 年 05 月 05 日
如果觉得我的文章对你有用,请随意赞赏