“位置：粘性；”元素不太整齐

Question

因此，我为学生们提供了一个中学，俗气的学校网站。夏天才刚刚开始，所以我正在做很多工作。我有三个按钮标签，并且它们的所有位置都设置为粘滞。当我向下滚动时，它们与页面顶部齐平排列（因为我将top：设置为0px;）。但是当页面向上滚动时，它们从顶部偏移了大约两个像素。但这非常明显，而且我认为它看起来很丑。它们之间也有很多间距。最好摆脱这两个。第一个按钮排列了我想要的方式。它仅包含文本。另外两个不对齐，周围有元素并包含图像。我认为这就是原因，但我正在努力解决问题。我要在深夜发布此消息，因此我无法再检查10个小时左右。但是，有一些帮助会很好，谢谢。

PS，我的网站地址是https://jeffthecow.com/ 这三个按钮的类别均为“ openbtn”。

Answer 1

好的，感谢@Ry，我制定了一个解决方案。我的代码如下：

.openbtn {
  white-space: nowrap;
  font-size: 25px;
  background-color: #333;
  text-align: left;
  top: 0px;
  color: lightgrey;
  border: none;
  height: 45px;
  z-index: 99999;
}

<div style="
    height: 45px;
    position: sticky;
    border-bottom: 2px solid lightgrey;
    border-top: 2px solid lightgrey;
    width: fit-content;
    top: 0;
">
  <button class="openbtn" title="Open Menu" onclick="openNav()" style="
    float: left;
">&#9776;</button>

  <a target="popup" style="padding: 0px;" onclick="window.open('https://jeffthecow.com/webchat/','name','width=510,height=412')"><button class="openbtn" title="Open Chat" style="/* align-self: stretch; */float: center;"><img src="https://jeffthecow.com/assets/images/Svg-Chat.webp"></button></a>

  <a href="#scrollBtnLocation"><button class="openbtn" title="Back To Top" style="
    float: right;
"><img src="https://jeffthecow.com/assets/images/ScrollTop.webp"></button></a>
</div>

另外，如果您运行代码段，它看起来并不正确，但是您知道了。差不多，我拿了三个按钮，并用div元素将它们很好紧地包裹起来，并将div的位置设置为粘滞。