如何将标签添加到CSS和HTML中的百分比栏？

我做了CSS的百分比酒吧，但我想，当我把它写更改写在在上面或旁边的百分比数字标签如何将标签添加到CSS和HTML中的百分比栏？

CSS代码：

#progressbar { 
    background-color: #999; 
    border-radius: 10px; /* (height of inner div)/2 + padding */ 
    padding: 0.5px; 
    max-width:150px; 
    font-size: 9px; 
} 
#progressbar > div { 
    background-color:red; 
    /* Adjust with JavaScript */ 
    height: 10px; 
    border-radius: 10px; 
    max-width:150px; 
    font-size: 12px;  
}

，并在身体

echo" Excellent  <div id="."progressbar"."> 
    <div style="."width:".(($ex*150)/100)."px;".">".$ex."%</div> 
</div>";

我该如何在旁边写一个字？

来源

2015-11-23 A.Nabil

让我知道如果我能改善它:)

#progressbar { 
 
    background-color: #999; 
 
    border-radius: 10px; 
 
    /* (height of inner div)/2 + padding */ 
 
    padding: 0.5px; 
 
    max-width: 150px; 
 
    font-size: 9px; 
 
    position: relative; 
 
} 
 
#progressbar > div { 
 
    background-color: red; 
 
    /* Adjust with JavaScript */ 
 
    height: 10px; 
 
    border-radius: 10px; 
 
    max-width: 150px; 
 
    font-size: 12px; 
 
} 
 
#progressbar span { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div id="progressbar"> 
 
    <span>Excellent</span> 
 
    <div style="width:100px;"></div> 
 
</div>

UPDATE：（请求文本旁边次Ë进度条）

#progressbar { 
 
    background-color: #999; 
 
    border-radius: 10px; 
 
    /* (height of inner div)/2 + padding */ 
 
    padding: 0.5px; 
 
    max-width: 150px; 
 
    font-size: 9px; 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
#progressbar > div { 
 
    background-color: red; 
 
    /* Adjust with JavaScript */ 
 
    height: 10px; 
 
    border-radius: 10px; 
 
    font-size: 12px; 
 
} 
 
#progressBarContainer span { 
 
    display: inline-block; 
 
}

<div id="progressBarContainer"> 
 
    <div id="progressbar"> 
 
    <div style="width:50%;"></div> 
 
    </div> 
 
    <span>Excellent</span> 
 
</div>

来源

2015-11-23 06:27:57 www139

非常感谢。但是，如果我想要在线旁边的话很棒。我在做什么 –

@ A.Nabil你想在进度条的左侧还是右侧？ – www139

我希望这个词出现在进度条的右侧，当我写它没有css它出现在行进度条后面 –

试试这个

<?php 
    $width = (($ex*150)/100); 
?> 
Excellent <div id="progressbar"> 
    <div style="width: <?php echo $width ?>"> 
    <?php echo $ex ?>% 
    </div> 
</div>

Phpfiddle Preview

来源

2015-11-23 06:16:55

我尝试这一点，但优秀是艾琳 –

如何将标签添加到CSS和HTML中的百分比栏？

回答

相关问题