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

-1

我正在为这个项目制作一个进度条，我正在努力工作，并且我已经完成了一半，但现在我已经碰到了一堵墙，我可以似乎没有解决。CSS3进度条 - 使用跨度来定义进度

我得到的问题是，子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); 
}

有人能告诉我请以正确的方式？

在此先感谢。

来源

2015-11-11 Mo Martin

http://codepen.io/anon/pen/wKQRLJ – m02ph3u5

为什么你需要跨度？ http://codepen.io/anon/pen/epQbwj –

容器中任何大小的百分比都会使该大小的元素占其父项的百分比（给出position: relative，可能还有其他一些我忘记的边界案例）。

要使用你的例子：

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

的span将是.progressbar60%。这应该是显而易见的，只需通过“百分比”的定义 - 它是“一定数量的（特别是100，我们已经共同认可的是'全部'）”或在您的具体情况下：“六分之一宽度”。

什么阻止你把width: 60%放在.progressbar元素上？我在CodePen中做到了这一点，它的工作非常出色。

实施例：

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

来源

2015-11-11 18:01:31 rockerest

虽然这样做确实有效，但它只是将颜色进一步推到一起，这种方式会让它们失去光明。基本上我想要的是进度条只显示全部100％宽度的60％，所以它是黄绿色的，不仅仅是绿色。 –

您需要跨度元件的显示属性改变为块。

您的.progressbar选择器应该很大，并且没有应用其他样式。使用.progressbar跨度代替

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>

来源

2015-11-11 18:08:04 Hitmands

您还可以查看进度条下面的资源：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％”。

祝你好运！

来源

2015-11-11 18:17:46

在代码中有几个问题。

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

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

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

来源

2015-11-11 18:43:28

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

回答

相关问题