在导航栏中有3个具有包装div元素的链接,问题是div内的链接未拉伸。检查屏幕截图-我需要点击链接才能在页面之间导航:
我想在导航中链接以像和高度一样扩展空间100%;
这是导航栏的CSS
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
color: var(--color-white);
background-color: var(--color-black);
.user-nav {
display: flex;
align-items: center;
&-item {
width: 118px;
font-size: 20px;
font-weight: 500;
line-height: 30px;
text-align: center;
color: var(--color-grey);
}
&-item-active {
width: 118px;
font-size: 20px;
font-weight: 500;
line-height: 30px;
text-align: center;
color: var(--color-grey);
box-shadow: inset 0 -4px 0 var(--color-red); // made border bottom inside of element
}
&-item-link {
text-decoration: none;
color: inherit;
}
}
.logo {
width: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
img {
width: 100%;
}
}
}
导航栏的HTML
<header className="header">
<nav className="user-nav">
<div className={this.handleActiveRoute('/', activeRoute)}>
<Link href="/">
<a className="user-nav-item-link">Dashboard</a>
</Link>
</div>
<div className={this.handleActiveRoute('/search', activeRoute)}>
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className={this.handleActiveRoute('/collections', activeRoute)}>
<Link href="/collections">
<a className="user-nav-item-link">Collections</a>
</Link>
</div>
</nav>
<div className="logo">
<img src={Logo} alt="logo" />
</div>
<div className="user-nav-icon">
<div className="user-nav-icon-notification">
<span className="icon-bell-o" />
</div>
<div className="user-nav-icon-settings">
<span className="icon-cog" />
</div>
</div>
</header>
如何使div内的链接具有100%的宽度和高度?
答案 0 :(得分:1)
链接上的“显示:阻止”可能会有所帮助