当按钮填充增加时，如何防止DIV尺寸更改

Question

每次我更改屁股上的填充时，导航栏的大小随之增加，当它更改尺寸时，其他项目看起来都不合配。有人可以告诉我如何将文本对齐，因为NAV条尺寸增加了或告诉我其他围绕此PLZ的其他方式。thx。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* NAV BAR */
nav {
  overflow: hidden;
}
a {
  text-decoration: none;
  color: black;
  font-size: 1.4em;
  padding: 31px 15px;
}
li {
  list-style: none;
}
ul {
  display: flex;
  justify-content: space-evenly;
  background: #FEFCD7;
  padding: 30px;
}
#online {
  background: teal;
  border: none;
  border-radius: 10%;
  font-size: 1.3em;
  /* PRoblem */
  padding: 5px 10px;
}

<nav>
  <ul>
    <li><a href="#">bleep</a></li>
    <li><a href="#">bloop</a></li>
    <li><a href="#">blap</a></li>
    <li><a href="#">bleepy</a></li>
    <li><a href="#">blab</a></li>
    <button id="online">Plap Online</button>
  </ul>
</nav>

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* NAV BAR */
nav {
  /* Try giving your nav a height and width so your code cannot modify it*/
  height: 100px;
  width: 100%;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: black;
  font-size: 1.4em;
  padding: 31px 15px;
}
li {
  list-style: none;
}
ul {
  display: flex;
  justify-content: space-evenly;
  background: #FEFCD7;
  padding: 30px;
}
#online {
  background: teal;
  border: none;
  border-radius: 10%;
  font-size: 1.3em;
  /* PRoblem */
  /* Use margin, it works for me */
  margin-top: -18px;
  padding: 20px 10px;
}

<nav>
  <ul>
    <li><a href="#">bleep</a></li>
    <li><a href="#">bloop</a></li>
    <li><a href="#">blap</a></li>
    <li><a href="#">bleepy</a></li>
    <li><a href="#">blab</a></li>
    
    <button id="online">Plap Online</button>
  </ul>
</nav>