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%的{{1}}。这应该只是通过“百分比”的定义显而易见 - 它是“一定数量的所有（特别是100，我们共同认可的是'所有'）”或在您的具体情况下：“宽度的十分之六”。 / p>

什么阻止你将.progressbar放在width: 60%元素上？我在你的CodePen中做到了这一点并且效果非常好。

示例：

.progressbar

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);
}

注意插入位置属性并删除＆＃34;宽度：0％＆＃34;在进度栏中。

祝你好运！

Answer 3

您的代码中存在多个问题。

首先，span不会告诉进度条它是60％，因为.progressbar的宽度为0（60％X 0 = 0）。

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

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

Answer 4

您需要将span元素的display属性更改为阻止。

您的.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>

CSS3进度条 - 使用跨度来定义进度

4 个答案: