我试图在使用hover
制作的垂直nav
上的flexbox
上加下划线。在没有nav
的水平flexbox
上,hover
下划线可以正常工作,但是一旦添加flexbox
,该下划线就会跨越整个框,而不仅仅是文本下方。
请参阅下面的第一个代码段如何按预期方式工作,但是在第二个代码段中将main_nav
垂直设置为flexbox
时,下划线就会中断。
如何解决此问题,使其在保持nav
垂直的同时正确下划线?
#wrapper {
width: 100%;
height: 300px;
background-color: black;
}
#wrapper #main_nav {
//display: flex;
//flex-direction: column;
}
.nav_item {
text-decoration: none;
color: white;
display: inline-block
}
.nav_item:after {
display: block;
content: '';
width: 0;
height: 2px;
background-color: white;
}
.nav_item:hover:after {
width: 100%;
transition: width 150ms ease-in;
}
<div id="wrapper">
<nav id="main_nav">
<a href="#" class="nav_item">Item1</a>
<a href="#" class="nav_item">Item2</a>
<a href="#" class="nav_item">Item3</a>
<a href="#" class="nav_item">Item4</a>
</nav>
</div>
#wrapper {
width: 100%;
height: 300px;
background-color: black;
}
#wrapper #main_nav {
display: flex;
flex-direction: column;
}
.nav_item {
text-decoration: none;
color: white;
display: inline-block
}
.nav_item:after {
display: block;
content: '';
width: 0;
height: 2px;
background-color: white;
}
.nav_item:hover:after {
width: 100%;
transition: width 150ms ease-in;
}
<div id="wrapper">
<nav id="main_nav">
<a href="#" class="nav_item">Item1</a>
<a href="#" class="nav_item">Item2</a>
<a href="#" class="nav_item">Item3</a>
<a href="#" class="nav_item">Item4</a>
</nav>
</div>
最佳答案
使用display: inline-flex;
代替块级的display:flex;
。