我有一个导航栏。如何将项目的高度设置为导航栏的 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

Answer 2

如果我对这个问题的理解正确，您想提高元素的高度。限制你这样做的事情是在你的 CSS 内部

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

从#navbar ul 中删除align-items: center;

所以它看起来像这样：

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

现在您应该能够增加和/或减少它的高度，以便按照您喜欢的方式正确地将其对齐到您的 div 标签上。