Question

我正在进行导航，我似乎无法弄清楚如何使底部边框向上增大，而不是向下扩展（这反过来会扩展我的标题几个像素），我可以解决设置高度的延伸标题，但边框仍然向下延伸而不是向上。

CSS：

header {
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
  background: #000000;
}
ul {
  list-style-type: none;
  display: block;
  margin: 0 0 0 20px;
  padding: 0;
}
ul li {
  display: inline-block;
  padding: 0;
}
ul li a{
  display: block;
  border-bottom: 1px solid #fff;
  font-size: 19px;
}
ul li a:hover{
  border-bottom: 2px solid #fff;
  background: #333;
  font-size: 19px;
}

HTML：

<header>
  <ul id="nav">
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
  </ul>
</header>

JSFiddle：

http://jsfiddle.net/Artsen/EZWvF/

Answer 1

所以你想把边框底部增加到顶部，对吧？

我最近必须为一个网站做这个。除了设置特定填充和边框属性之外别无他法。

我在这里编辑了你的jsfiddle：http://jsfiddle.net/EZWvF/2/（更改了一些属性以使测试用例更加明显）

原则是：在悬停时从padding-bottom和border-bottom交换像素值。 这些是解决方案的关键路线：

ul li a {
 border-bottom: 1px solid white;
 padding-bottom: 5px;
}
ul li a:hover {
 border-bottom: 5px solid white;
 padding-bottom: 1px;
}

注意：仅当您不添加css转换时才有效。如果你没有引用我放入小提琴的css-transition，你会发现div仍然会扩展到底部。如果你想要一个ss-transition，你需要在li上添加一个单独的div来模仿边框。

Answer 2

由于Tyblitz建议使用额外的填充值：当您不需要转换时，悬停效果很好。

如果您需要转换并且不想引入额外的div，可以使用行高/高度方法来控制垂直高度。

所以不要这样做：

.nav-element a {
  color: gray;
  padding: 25px 15px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;
}

这样做：

.nav-element a {
  color: gray;
  padding: 0 15px;
  line-height: 70px;
  height: 70px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;
}

查看不起作用的示例here 并且工作（使用行高/高度）here

边界问题（悬停时向下扩展）

2 个答案: