Question

我有一个导航菜单，我想在悬停到其li元素时添加3px实线边框。问题是当你将鼠标悬停在这些li上时，它们的边框会用1px实线边框向下推动它们的父容器div。当导航边框覆盖容器的底部边框时，将导航菜单及其父容器保持在一个平面上的最佳方法是什么？（请注意，注释只是为了消除内联块元素之间的额外间距）。

HTML

<nav>
 <ul>
  <li><a href="">Menu 1</a></li><!--
  --><li><a href="">Menu 2</a></li>!--
   --><li><a href="">Menu 3</a></li>
 </ul>
</nav>

CSS

nav {border-bottom: 1px solid #e6e6e6;}
nav li {display: inline-block; list-style: none;}
nav li a {color: #999; display: inline-block; font-weight: bold; padding: 0 15px 10px 15px; text-decoration: none;}
nav li a:hover {border-bottom: 3px solid #e32b21; color: #e32b21;}

Answer 1

您可以使用透明边框替换它。

jsFiddle example

nav li a {
    border-bottom: 3px solid transparent;
}

或者，您可以在:hover

上添加3px的负余量

jsFiddle example

nav li a:hover {
    margin-bottom:-3px;
}

我会选择第一个解决方案。

Answer 2

这会给你你想要的东西，即使它使用的是盒子阴影而不是边框。但这是一个快速而简单的解决方案。

nav li a:hover { 
    box-shadow: 0 3px 0 #e32b21; 
}

另一个选择就是只为你的元素添加3px，你之前有10px，所以将其设为7px，可能会做到这一点

nav li a:hover {
     padding-bottom: 7px;
}

向导航链接添加底部边框而不下推其父div

2 个答案: