html - 我有一个导航栏。如何将元素的高度设置为导航栏的 100%？

Question

我一直在尝试制作一个导航栏，但一直不太成功。导航栏 div 的高度为 60px，但是，我似乎无法以任何方式增加内部元素的高度。 (填充除外)我做错了什么？
What I'm getting
What I'm trying to get

#navbar {
      width: 100vw;
      height: 60px;
      background: #deff00;
      box-shadow: 0 0 50px black;
      z-index: 2;
      position: relative;
      top: 85px;
    }
    #navbar ul {
      height: 100%;
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .navbar-link {
      text-decoration: none;
      color: black;
      height: 60px;
      padding: 0 20px;
    }
    .navbar-link:hover {
      background: #adc703;
    }

<div id="navbar">
          <ul>
            <li>
              <a href="#" style="font-weight: bold;" class="navbar-link"
                >ÚVODNÍ STRÁNKA</a
              >
            </li>
            <li>
              <a href="#" class="navbar-link">ŠKOLA</a>
            </li>
            <li><a href="#" class="navbar-link">STUDIUM</a></li>
            <li><a href="#" class="navbar-link">FOTOGALERIE</a></li>
            <li><a href="#" class="navbar-link">KONTAKT</a></li>
          </ul>
    </div>

    

谢谢!

Answer 1

试试这个:

#navbar {
      width: 100vw;
      height: 60px;
      background: #deff00;
      box-shadow: 0 0 50px black;
      z-index: 2;
      position: relative;
      top: 85px;
}
#navbar ul {
      height: 100%;
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
}

#navbar li {
      display: table;
} 

.navbar-link {
      text-decoration: none;
      color: black;
      height: 60px;
      padding: 0 20px;
      vertical-align: middle;
      display: table-cell;
}

.navbar-link:hover {
      background: #adc703;
}

刚刚为 li 添加了 display: table;，为 a 标签添加了 vertical-align: middle;display: table-cell，有时这种旧技术非常适合) 代码笔:https://codepen.io/Liveindream/pen/mdyXmxj?editors=1100