CSS3 进度条 - 使用 span 定义进度量

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 将是 60% 的 .progressbar。简单地通过“百分比”的定义，这应该是显而易见的 - 它是“所有的一些（特别是 100，我们集体同意是'全部'）”或在您的具体情况下：“宽度的十分之六”。

是什么阻止您将width: 60% 放在.progressbar 元素上？我在你的 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);
}

注意插入位置属性和删除进度条中的“width: 0%”。

祝你好运！

Answer 3

您的代码中有几个问题。

首先，span 并没有告诉进度条它是 60%，因为.progressbar 的宽度为 0( 60% X 0 = 0 )。

您应该将display:block 添加到span，并指定高度。

我编辑了您的代码并使其按您期望的方式工作。这是一个代码笔：https://codepen.io/anon/pen/YyRBVW

Answer 4

需要将span元素的display属性改为block。

您的 .progressbar 选择器应该 100% 大并且没有应用其他样式。改用 .progressbar span

SPAN 元素是 inline elements，您不能为它们指定任何大小！

所以，如果你尝试这样的事情......可能会奏效！

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>