html - 切换垫子滑块的显示时如何防止内容在屏幕上跳转

Question

如果我将鼠标悬停在音量图标上，它会添加一个垫子滑块

这会推动整个内容下降，我该如何防止这种情况？

在这个Stackblitz 示例中可重现

<div>Hover on below icon to see jumping</div>

<span class="volume-controls"
          (mouseover)="showVolSlider = true"
          (mouseleave)="showVolSlider = false">

      <button mat-icon-button
              (click)="toggleMute()">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT34nN7TXRgBVDzlAXnsLNkKK-oxUSRDgfV0RXrudKTH8ivIUcQ" style="height: 20px">
      </button>

      <span class="slider-wrapper" [hidden]="!showVolSlider">
        <mat-slider></mat-slider>
      </span>

</span>

Answer 1

您所需要的只是添加到您的 SASS 文件中

.mat-icon-button{
    padding-top:8px;
  }

默认情况下，音量将 8px 添加到顶部填充。镜像将避免重新对齐

.volume-controls {
    .mat-icon-button{
        padding-top:8px;
      }
...

关于你的第二个问题，你所要做的就是固定你的容器的大小。我想这将是更简单的方法：

  .volume-controls {
    display:block;
    height:55px;
    max-height:55px !important;

Stackblitz 演示