HTML / CSS中的进度条 [英] Progress bar in HTML/CSS

问题描述

 dd { 
    /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
 }

 dd div.blue { 
    /*position: relative; */
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
 }

HTML：

<dd>
    <div class="blue" style="width:35%;"> 
</dd>

这会创建一个白色条，并以蓝色35％填充。

This creates a white bar and fills it with blue 35%.

现在我想用两个不同的值填充同一个进度条。例如，如果值A是30％而值B是40％，则条的70％将被填充，但是每个的百分比可以通过颜色的差异来看到。值A和B可以在任何顺序在酒吧，只要我可以告诉有两个不同的事情，看每个人占用了多少。

Now I would like to fill the SAME progress bar with two different values. For example, if value A was 30% and value B was 40%, 70% of the bar would be filled, but the percentage of each could be seen by a difference in colors. Value A and B can come in any order on the bar, as long as I can tell there are two different things and "see" how much each one is taking up.

有任何建议吗？

谢谢。

推荐答案

您在寻找这样的东西吗？

Are you looking for something like this?

CSS：

div.dd { 
   /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
}

div.dd div.blue { 
    /*position: relative; */
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}
div.dd div.red { 
    /*position: relative; */
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

HTML：

<div class="dd">
    <div class="blue" style="width:35%;"></div>
    <div class="red" style="width:10%;"></div>
</div>

我不知道你为什么要使用dd标签（对我来说， div在dd标签下，而不是在里面）。

I'm not sure why you're using the dd tag (for me, this tag causes the divs to render beneath the dd tag, rather than inside).

这篇关于HTML / CSS中的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！