当增加按钮填充时如何防止div大小改变？

Question

每次我更改按钮上的填充时，导航栏的大小都会随之增加，而其他项在更改大小时看起来也没有变化。有人可以告诉我如何随着导航栏大小的增加来对齐文本，或者告诉我解决此问题的其他方法。谢谢。

* {
  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>