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>

<a></a>

</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