如何拉伸以填充其容器空间？

Question

在导航栏中有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％的宽度和高度？

Answer 1

链接上的“显示：阻止”可能会有所帮助