html - 两个inline-block 元素为什么会错位显示？

Question

具体代码 demo

问题： 为什么a标签设置overflow和不设置overflow 显示效果不同？

不设置如下显示

设置后如下显示

v

Answer 1

overflow:hidden的这个属性影响了inline-block元素baseline的位置；因为你的list也是行内块，也设置了overflow，而后下一个元素与前一个元素基线对齐就错位了，第二个也设置，baseline也改变就不错位了

   <div>       <span>11</span>       <span class="desc">22</span>       <span>33</span>       <span>44</span>    </div>   span{     display:inline-block;   }   .desc{     overflow:hidden;   }    // 这时候另外的span元素会向下偏移；

// 解决方案，修改vertical属性；    .list {        display: inline-block;        width: 80px;        height: 80px;        overflow: hidden;        vertical-align:middle;    }    .add {        display: inline-block;        width: 76px;        height: 76px;        color: #ccc;        border: 2px dashed;               transition: color .25s;        position: relative;        /**        为什么不设置overflow  a标签就会下沉显示？        **/        /* overflow: hidden; */          vertical-align:middle;    }