-12.24-:
html布局如下:
<div class="tab-tit">

    <a href="javascript:;">html</a>
    <a href="javascript:;">css</a>
    <a href="javascript:;">javascript</a>
    <a href="javascript:;">vue</a>

</div>
css:

tab{

    width: 600px;
    margin: 0 auto;
}
.tab-tit{
    width: 600px;
    font-size: 0;
}
.tab-tit a{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    width: 25%;
    text-align: center;
    background: #ccc;
    color: #333;
    text-decoration: none;
    /* float: left; */
}
.tab-tit .cur{
    background: #09f;
    color: #fff;
}

clipboard.png

对于这块,我不是很理解.tab-tit{font-size:0},后发现,注销这个样式(font-size:0),用float:left可以解决。后查阅一些资料,get到了原因。

以下是原文解释
https://segmentfault.com/q/10...
问题的根源是 inline(a标签默认是display:inline) 和 inline-block (.list-info 设置的是 display:inline-block) 是内联布局,既然是内联那么就会受空白区域的影响。

用到我这里,解决办法:

1、去掉空白

clipboard.png

clipboard.png

2、font-size:0 可以让空白区域消失


喝咖啡的小虫
1 声望0 粉丝