CSS - 为什么我的工具提示无法进一步向左移动？

Question

好吧，我现在正在创建 Twitter 网页的副本大约一周。这是第二个主 Flex 上第一个上部主 div 的一部分，其中显示用于特定操作的图标按钮。两天来，我一直在为按钮创建工具提示。其余的工具提示工作正常，我唯一有问题的工具提示是“计划”按钮的工具提示。由于未知原因，它不会移过 div 的特定部分。

与问题相关的代码的关键 HTML 部分：

<div class="ikone-i-objava">
          <div class="ikona-slike"><button class="slika-vrh"><img class="pic-icon-image" src="Image icon.png"><div class="tooltip">Medij</div></button></div>
          <div class="ikona-slike"><button class="slika-gif"><img class="pic-icon" src="GIF icon.png"><div class="tooltip-dva">GIF</div></button></div>
          <div class="ikona-slike"><button class="slika-lista"><img class="pic-icon" src="Poll icon.png"><div class="tooltip-tri">Poll</div></button></div>
          <div class="ikona-slike"><button class="slika-smajlic"><img class="pic-icon" src="Smile icon.png"><div class="tooltip-cetiri">Emoji</div></button></div>
          <div class="ikona-slike"><button class="slika-kalendar"><img class="pic-icon" src="Screenshot_9.png"><div class="tooltip-pet">Schedule</div></button></div>
          <div class="ikona-slike"><button class="slika-mapa"><img class="pic-icon-mapa" src="Screenshot_1901.png"></button></div>
          <div class="botun"><button class="post-button-dvojka">Post</button></div>
        </div>`

与问题相关的代码的关键 CSS 部分：

.slika-kalendar {
    height: 30px;
    width: 30px;
    border-color: white;
    background-color: white;
    border-width: 0px;
    border-radius: 30px;
    padding-left: 5px;
    padding-right: 3px;
    margin-left: 12px;
    position: relative;
    z-index: 2;
  }

  .slika-kalendar:hover {
    background-color: lightblue;
    cursor: pointer;
    transition: 0.1s;
  }

  .slika-kalendar .tooltip-pet {
    background-color: rgb(76, 76, 76);
    color: white;
    height: 16px;
    width: 48px;
    font-family: Arial;
    padding-left: 5px;
    padding-right: 2px;
    padding-top: 3px;
    font-size: 11px;
    margin-right: 2px;
    left: 0px;
    right: 635px;
    top: 35px;
    position: absolute;
    align-items: center;
    opacity: 0;
  }

  .slika-kalendar:hover .tooltip-pet 
{
    opacity: 1;
  }

实时服务器和开发工具的图像：

所以我试图让我的 Twitter 按钮显示在此图标下方中心对齐的工具提示。我尝试过使用vertical-align:center，但它不起作用。其余按钮的工具提示都可以正常工作，但这个按钮却不行。

所有这些 div、图像和按钮的左边距也同样缩放，只有一个除外。

• 所有按钮的左边距均为 12 像素。
• 图标图像的右边距为 2 像素。唯一右边距为 8 像素的图像是最左边的图像。
• 所有图标 div 的 margin-left 均为 10px。
• 所有按钮的 padding-left 和 padding-right 设置为 5px。

我尝试对按钮使用 padding-left 和 right，但它们只是拉伸工具提示线而没有实际移动它。由于工具提示是相对定位的，我尝试通过像素输入它的方向，但是每当我输入正确的：630px 或以上时，它就不会移动超过该值。

Answer 1

如果

position: relative;

上的

button.slika-kalendar

是唯一设置了位置：相对设置的按钮，则可能会导致此问题。其他按钮也有

position: relative;

吗？

如果其他按钮的位置值不同，请尝试从

position: relative;

中删除

button.slika-kalendar

。

观看现场演示后，将工具提示居中的最快方法是放置

.slika-kalendar .tooltip-pet{ left:-50%;}

（自然包括 .tooltip-pet 的其余现有 CSS。）