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

如果我对这个问题的理解正确，你想提高元素的高度。限制你这样做的是你的 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;
}

现在您应该可以增加 and/or 降低它的高度，以便按照您喜欢的方式将它正确地对齐到您的 div 标签上。

Answer 2

试试这个：

#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

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

I have a navbar. How do I set the height of the items to be 100% of the navbar?

html

css

height

navbar