a添加hover显现border，移入导致其他a下移
<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上面都会导致其他三个下移，这是为嘛
函数式编程浏览 559回答 2
2回答
-
largeQ
因为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;} 即可
随时随地看视频慕课网APP
Html/CSS