Html 更改div的宽度会使元素向左移动

将鼠标悬停在JSFIDLE中的音量图标上，可以看到它将静音向左移动

如何将图标保持在原位，并将音量栏向右展开

我知道我可以在进度条上更改最小宽度，但我不想这样做

最好我不想改变任何其他div上的css，除了音量控件和子控件

Html:

---

您可以设置

.jp进度{flex:0 0 240px；}

而不是

宽度

.jp层{
最小宽度：900px；
}
.jp jplayer.fa{
字体大小：24px；
}
.jp sleek.jp gui{
高度：42px；
背景色：#E5；
位置：相对位置；
}
.jp sleek.jp gui.jp图标控制.jp进度{
背景颜色：绿色；
身高：100%；
flex:0240px；
/*宽度：600px*/
/*最小宽度：240px*/
位置：相对位置；
}
.jp sleek.jp gui.jp控件{
身高：100%；
位置：相对位置；
保证金：0自动；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
宽度：50%；
}
.jp sleek.jp gui.jp controls.jp音量控制{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
.jp sleek.jp gui.jp图标控件按钮{
最小宽度：42px；
}
.jp sleek.jp gui.jp控件按钮{
颜色：#000；
填充：0；
边界：无；
背景色：透明；
}
.jp sleek.jp gui.jp mute{
身高：100%；
}
.jp音量条{
高度：6px；
宽度：0；
背景色：#a1c1f4；
光标：指针；
边界半径：1px；
过渡时间：0.3s；
}
.jp音量控制：悬停.jp音量条{
宽度：100px；
过渡时间：0.3s；
}

---

您可以将进度条上的

宽度：600px

更改为

最大宽度：600px

，这样就可以工作了。你也不想要这个？

<div class="jp-sleek jp-jplayer jp-audio">
  <div class="jp-gui">
    <div class="jp-controls jp-icon-controls">
      <button class="jp-repeat"><i class="fa fa-repeat"></i></button>
      <div class="jp-progress">

      </div>
      <div class="jp-volume-controls">
        <button class="jp-mute"><i class="fa fa-volume-off"></i></button>
        <div class="jp-volume-bar">
        </div>
      </div>
      <button class="jp-full-screen"><i class="fa fa-expand"></i></button>
    </div>
  </div>
</div>

.jp-volume-bar {
  height: 6px;
  width: 0;
  background-color: #a1c1f4;
  cursor: pointer;
  border-radius: 1px;
  transition-duration: 0.3s;
}

.jp-volume-controls:hover .jp-volume-bar {
  width: 100px;
  transition-duration: 0.3s;
}