在 Flex div 中填充推动项目？

Question

所以我有一个导航栏，在这个导航栏中我有徽标、选项和按钮。每当我对按钮应用填充时，它会将其他所有内容推到左侧吗？任何建议，因为我以前从未发生过这种情况。这种情况也会发生在其他东西上，所以如果我给徽标提供任何填充，它也会推动这些项目。为什么会发生这种情况，因为我看了一些教程只是为了确定，但我不知道我做错了什么。也只是想添加align-items: center 也不起作用。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

.container {
  height: auto;
  width: 100%;
  /* overflow: hidden; */
}

.section1 {
  background: rgb(180, 135, 238);
  background: linear-gradient(90deg, rgba(180, 135, 238, 1) 0%, rgba(148, 187, 233, 1) 100%);
}

.logo {
  font-size: 4rem;
  font-family: "Protest Revolution", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
  margin-bottom: 10px;
  margin-left: -10px;
}

.navbar {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  background: rgb(180, 135, 238);
  background: linear-gradient(90deg, rgba(180, 135, 238, 1) 0%, rgba(148, 187, 233, 1) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px;
  position: sticky;
  top: 0;
  z-index: 99999;
}

.nav-buttons li {
  font-weight: 500;
  font-size: 1.7rem;
  display: inline-block;
  padding: 20px;
  list-style: none;
}

.nav-buttons li a {
  color: white;
  text-decoration: none;
}

.navbar .sign-up {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 5px;
  padding: 8px 50px 8px 50px;
}

<div class="container">
  <section class=section1>
    <div class="navbar">
      <label class="logo">appy</label>
      <ul class="nav-buttons">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
      <a href="#" class="sign-up">SIGN UP</a>
    </div>

Answer 1

您的 Flex 容器 (

.navbar

) 使用

justify-content: space-between

) 来分隔 Flex 项目。这意味着每个项目的宽度将取决于行上的可用空间。当您向徽标或按钮添加填充时，会消耗可用空间，从而重新分配剩余的可用空间。如果您希望尺寸固定，请使用固定宽度，而不是自由分配。