<style>a { display:inline-block; width:50px; height:50px; margin-left:20px; background:#CCC;}a:hover { border-bottom:#F00 solid 7px;}</style><body><div style=" width:1000px; height:500px; margin:0 auto;"> <div style=" height:50px;background:#3C9;"> <a></a> <a></a> <a></a> <a></a> </div> <div style=" height:300px; margin-top:50px; background:#0F0;"> </div></div>移入其中一个a上面都会导致其他三个下移，这是为嘛
2 回答
largeQ
TA贡献2039条经验 获得超7个赞
因为a在hover状态下显示了7px的下border,此时a的高度是 原来高度+7px 总高度发生变化.
a { display:inline-block; width:50px; height:50px; margin-left:20px; background:#CCC;}
//改为如下
a { display:inline-block; width:50px; height:43px; margin-left:20px; background:#CCC;border-bottom:#CCC solid 7px;}
即可- 2 回答
- 0 关注
- 558 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消