如何在按钮内部底部放置100%宽度进度条？多种布局尝试未果

问题出在绝对定位的进度条没正确设置宽度和定位逻辑，导致要么显示不全要么位置不对。调整.progressBar的样式就能搞定：

修正后的完整代码 #

.rect {
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #1d3557;
  background: #faf5ff;
  width: 208px;
  text-align: center;
  position: relative;
  /* 可选：防止进度条超出按钮圆角 */
  overflow: hidden;
}
.rect:hover {
  background: #f5f6ff;
}
.rect:active {
  background: #eff1ff;
}
.progressBar {
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(23, 56, 165);
}
.label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="rect" on:click>
    <div class="label">I'm a button</div>
    <div class="progressBar"></div>
</div>

关键修改说明 #

• 用left: 0和right: 0替代原来的负margin，进度条会自动填充父元素的整个宽度，不用手动计算padding对应的偏移量，适配性更强。
• 给.rect加overflow:hidden是为了避免进度条露出按钮的圆角边框（如果不需要圆角效果可以删掉这行）。
• 去掉了冗余的margin-left/-right，让定位逻辑更清晰。

修改后进度条会精准贴在按钮底部，宽度占满100%，同时不影响按钮的hover、active状态。

内容的提问来源于stack exchange，提问作者user1526513