我正在嘗試制作一個按鈕，它的底部包含一個矩形的進度條，但仍然在里面。該欄應該是按鈕寬度的100%。我嘗試了很多不同的方法，包括絕對位置、網格、flex、表格，不管出于什么原因，它們要么隱藏進度條，要么顯示得太高(就在標簽下面)。我快被弄糊涂了。謝謝！

.rect {
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #1d3557;
  background: #faf5ff;
  width: 208px;
  text-align: center;
  position: relative;
}
.rect:hover {
  background:  #f5f6ff;
}
.rect:active {
  background: #eff1ff;
}
.progressBar {
    height: 2px;
    margin-left: -8px;
    margin-right: -8px;
    position: absolute;
    bottom: 0px;
    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>

我在https://www.tutorialspoint.com/online_html_editor.php,和你玩代碼，在我增加寬度后:100%；在里面。progressBar，我看到按鈕底部出現了一個小條。這能解決你的問題嗎？

你是指像這樣的東西嗎？

HTML:

<div class="parent">
  <button class="btn">Button</button>
  <label for="progress"></label>
  <progress id="progress" value="85" max="100"> 85% </progress>
</div>

CSS:

.parent {
  width: 10rem;
}

.btn {
  width: 100%;
  height: 5rem;
}

#progress {
  width: 100%;
  display: block;
  margin-top: 1rem;
  border-radius: 0;
  position: relative;
  bottom: 2.5em; /* change this value for position */
}

代碼筆鏈接

據我所知，你可以試試。

超文本標記語言

<div class="rect" on:click>
    <div class="label">I'm a button</div>
    <progress class="progressBar" id="progress" value="75" max="100"> 85% </progress>
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.rect {
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #1d3557;
  background: #faf5ff;
  width: 208px;
  text-align: center;
  position: relative;
}
.rect:hover {
  background:  #f5f6ff;
}
.rect:active {
  background: #eff1ff;
}
.progressBar {
    height: 2px;
    position: absolute;
    bottom: 0px;
    background-color: rgb(23, 56, 165);
    left:0; right:0; width:100%;
    height:5px;
}
.label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Codepen示例