边界底部问题(悬停时向下扩展)
问题描述:
我正在研究导航,我似乎无法弄清楚如何使底部边界向上增大,而不是向下扩展(反过来扩展我的头像有几个像素),我可以通过设置高度来修正扩展头部,但是边框仍然会向下延伸而不是向上。边界底部问题(悬停时向下扩展)
的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:
答
所以,你要增加边框底部到顶部,右?
我实际上不得不为最近一个网站做这个。除了设置特定的填充和边框属性之外,没有别的办法。
我编辑您的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的模拟边界。
答
由于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 和不工作(使用行高/高)
非常感谢你,昨天晚上我把头发拉出来。 – Artsen 2013-05-04 20:43:00
甚至2年后,你让我的一天,谢谢! – sym 2015-09-04 07:57:07