2018.12月问题整理杂记

33次阅读

共计 717 个字符,预计需要花费 2 分钟才能阅读完成。

-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;
}

对于这块,我不是很理解.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、去掉空白

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

正文完
 0