如何將標籤添加到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中的百分比欄？

回答

相關問題