我有一个导航栏。如何将项目的高度设置为导航栏的100％？

Question

我一直在尝试制作导航栏，但是我还没有成功。 navbar div的高度为60px，但是，我似乎无法以任何方式增加内部元素的高度。 （填充除外）我在做什么错？What I'm gettingWhat 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

如果我正确理解了这个问题，您想提高元素的高度。限制您执行此操作的是在CSS内]

#navbar ul {
height: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
从align-items: center;中删除#navbar ul

因此看起来像这样：

#navbar ul {
height: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
现在，您应该能够按自己的方式增加和/或减小其高度，以使其正确对准div标签。

Answer 2

尝试一下：