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

我正在研究导航，我似乎无法弄清楚如何使底部边界向上增大，而不是向下扩展（反过来扩展我的头像有几个像素），我可以通过设置高度来修正扩展头部，但是边框仍然会向下延伸而不是向上。边界底部问题（悬停时向下扩展）

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

来源

2013-05-04 Artsen

所以，你要增加边框底部到顶部，右？

我实际上不得不为最近一个网站做这个。除了设置特定的填充和边框属性之外，没有别的办法。

我编辑您的jsfiddle这里：http://jsfiddle.net/EZWvF/2/（改变了一些属性，使测试用例更可见）

其原理是：交换的像素值填充，底部和悬停边框底部。 这些都是关键行到你的解决方案：

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转换，你需要添加一个单独的div到li的模拟边界。

来源

2013-05-04 12:04:07 Tyblitz

非常感谢你，昨天晚上我把头发拉出来。 – Artsen 2013-05-04 20:43:00

甚至2年后，你让我的一天，谢谢！ – sym 2015-09-04 07:57:07

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

如果您需要过渡并且不想引入额外的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 和不工作（使用行高/高）

来源

2015-02-24 06:07:31 ambidexterous

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

回答

相关问题