html - 调整窗口大小时，如何阻止导航栏中的文本上下移动

Question

正如标题所说，当窗口水平调整大小时，我的导航栏中的文本会上下移动。我试了又试，但我找不到解决方案，我试过使用位置、垂直对齐，并使我的 Logo 横幅和链接一起成为百分比高度(但这总是给我留下一个巨大的横幅 no-不管怎样，链接实际上处于指定的高度。我该如何解决这个问题？)我附上了我的 HTML 和 CSS 以供引用。请注意，我也不知道如何在不搞砸一切的情况下摆脱菜单容器。如果有人也可以概述我在这里完全没有必要的内容，那就太好了。很抱歉问了这么多，我是新手，并且一直在尽我所能地学习各种教程。 idk 如果它重要但图像“goatrockbanner.png”的尺寸是 2000pxx467px。在我的桌面上最适合我的高度似乎是 60px 左右。非常感谢您的帮助。

   <div class='menu-container'>
     <div class='menu'>
       <img class='logobanner' src='files/images/goatrockbanner.png'/>
       <div class='links'>
         <a href='games.html' class="button">Games</a>
         <a href='news.html' class="button">News</a>
         <a href='#forums' class="button">Forums</a>
         <a href='contact.html' class="button">Contact Us</a>
       </div>
     </div>
   </div>
 </body>

.menu-container {
  color: #efefef;
  background-color: #000000;
  display: flex;
  flex-wrap: nowrap;
  position: fixed;
}

.menu {
  width: 100%;
  height: 3%;
  display: flex;
  justify-content: left;
  font-size: 140%;
}

.logobanner {
  height: 60px;
  display: flex;
  flex-shrink: 0;
}

.links {
  width: 87.5%;
  height: 60px;
  text-align: center;
  float: left;
  white-space: nowrap;
  justify-content: space-between;
  display: flex;
  flex-wrap: nowrap;
}

.button {
  height: 100%;
  background-color: #000000;
  color: #efefef;
  transition: 0.3s;
  text-align: center;
  padding-top: 0.8%;
  padding-bottom: 0.8%;
  padding-left: 5%;
  padding-right: 5%;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: 140%;
  flex: 1;
  flex-grow: 1;
}
.button:hover {
  height: 100%;
  background-color: #4e4e4e;
  color: #efefef;
  flex: 1;
  cursor: pointer;
}

Answer 1

这是 .button 元素上使用 % 值的 padding 问题。如果您是 CSS 新手，您必须阅读 CSS 中的 units 和 % 我想说的是最麻烦的，因为它使用父级进行计算。尝试使用 px 并查看它是否解决了问题。更多关于 units