CSS3進度欄-使用跨度定義進度量

Question

我正在為我正在從事的這個項目制作進度條，我已經完成了一半，但是現在我碰壁了，我似乎無法解決。

我遇到的問題是子div並不決定父div的寬度。 （因此，跨度不會告訴進度條其寬度應為60％。）

可以在此處找到現場演示-http: //codepen.io/anon/pen/BoGvvL

<div class="progress-container">
    <div class="progressbar">
        <span style="width:60%"></span>
    </div>
</div>

CSS

* {
  box-sizing:border-box;
}

.progress-container {
    width:150px;
    margin:0 auto;
    background:#CDCDCD;
    height:30px;
    border-radius:8px;
    padding:3px 5px;
}
.progressbar {
    height: 24px;
    width:0%;
  max-width:100%;
    border-radius:8px;
    background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e); 
    background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e);  
}

有人可以用正確的方式指導我嗎？

提前致謝。

Answer 1

容器中任何百分比的大小都將使元素具有其父元素的大小（給定position: relative ，可能還有其他一些我忘記的邊緣情況）。

使用您的示例：

<div class="progress-container">
    <div class="progressbar">
        <span style="width:60%"></span>
    </div>
</div>

span將是.progressbar 60% 。 僅通過“百分比”的定義就可以明顯看出這一點-它是“全部數量的一部分（特別是100，我們共同同意是'全部'）”，或者在您的特定情況下為：“十分之六”。

是什么阻止您在.progressbar元素上放置width: 60% ？ 我在您的CodePen中做到了，效果很好。

例：

<div class="progress-container">
  <div class="progressbar" style="width: 60%">
  </div>
</div>

Answer 2

您也可以在進度條上查看以下資源： https : //css-tricks.com/css3-progress-bars/ 。 如果您感興趣，這可以為您提供有關進度條和一些模板的詳細信息。

要使用您已有的代碼，您可以使用以下代碼（此處為實時代碼： http : //codepen.io/anon/pen/RWqEXW#0 ）。

HTML：

<div class="progress-container">
  <span class="progressbar" style="width:60%">
  </span>
</div>

CSS：

* {
  box-sizing: border-box;
}

.progress-container {
  position: relative;
  width: 150px;
  margin: 0 auto;
  background: #CDCDCD;
  height: 30px;
  border-radius: 8px;
  padding: 3px 5px;
}

.progressbar {
  position: absolute;
  height: 24px;
  max-width: 100%;
  border-radius: 8px;
  background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e);
  background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e);
  background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e);
  background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e);
}

請注意在進度欄中插入位置屬性並刪除“寬度：0％”。

祝好運！

Answer 3

您的代碼中有幾個問題。

首先， span不會告訴進度條它是60％，因為.progressbar的寬度為0（60％X 0 = 0）。

您應該在span添加display:block ，並指定高度。

我編輯了您的代碼，使其按您期望的方式工作。 這是一支密碼筆： https : //codepen.io/anon/pen/YyRBVW

Answer 4

您需要將span元素的display屬性更改為block 。

您的.progressbar選擇器應大100％，並且不應用其他樣式。 使用.progressbar span代替

SPAN元素是內聯元素 ，您不能為其分配任何大小！

因此，如果您嘗試類似的操作……可能有效！

 function updateProgress() { var val = document.querySelector('.val').value; var el = document.querySelector('.progressbar span'); el.style.width = val + '%'; el.innerText = val + '%'; }; 

 .progressbar { background: red; width: 100%; font-size: 16px; } .progressbar span { display: block; text-align: center; color: #fff; transition: 300ms width linear; line-height: 2em; background: green; max-width: 100%; } 

 <div style="padding: 1em 0;"><input class="val" max="100" type="number" value="10" onchange="updateProgress()"/></div> <div class="progressbar"> <span style="width: 10%;">10%</span> </div>