進度條百分比與酒吧對齊

我正在創建一個進度條，目前百分比顯示在右側，但現在我希望百分比能夠跟隨酒吧，不管藍色酒吧是短還是長。進度條百分比與酒吧對齊

的例子，我希望

enter image description here

.popup_survey_whitebox_percent { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    color: #F30; 
 
    float: right; 
 
    margin-top: 10px; 
 
} 
 
.popup_survey_whitebox_progressbar { 
 
    background: #444; 
 
    width: 100%; 
 
    height: 5px; 
 
    border-radius: 10px; 
 
} 
 
.popup_survey_whitebox_progressbar_inner { 
 
    background: #0CF; 
 
    width: 100%; 
 
    height: 5px; 
 
    border-radius: 10px; 
 
    box-shadow: 0 3px 7px rgba(0, 0, 0, .25); 
 
    margin-top: 5px; 
 
}

<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div> 
 
<br> 
 
<div class="popup_survey_whitebox_progressbar"> 
 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div> 
 
</div> 
 
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div> 
 
<br> 
 
<div class="popup_survey_whitebox_progressbar"> 
 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div> 
 
</div>

來源

2015-01-05 Im Happy

HTML：

移動popup_survey_whitebox_percent內popup_survey_whitebox_progressbar_inner：

<div class="popup_survey_whitebox_progressbar"> 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"> 
     <div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div> 
    </div> 
</div>

CSS：

變化margin-toppopup_survey_whitebox_percent的：

.popup_survey_whitebox_percent{ 
    float:right; 
    margin-top: -15px; 
    font-size:12px; 
    font-weight:bold; 
    font-style:italic; 
    color:#F30; 
}

見Fiddle

來源

2015-01-05 07:21:51 haim770

感謝〜這是我期待已久！ –

試試這個你只需要把你的文字PERC進度條html標記

div class="popup_survey_whitebox_progressbar"> 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"> 
     <span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span> 
<br> 
     </div> 
</div> 
<br> 
<div class="popup_survey_whitebox_progressbar"> 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"> 
     <span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span> 
    </div> 
</div>

內entage標籤試試這個 http://jsfiddle.net/e4wvyamh/

來源

2015-01-05 07:25:42

您可以設置等於進度條的width的百分比值的margin-left。

$('.popup_survey_whitebox_percent').each(function() { 
 
    $(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width')); 
 
});

.popup_survey_whitebox_percent { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    color: #F30; 
 
    margin-top: 5px; 
 
} 
 
.popup_survey_whitebox_progressbar { 
 
    background: #444; 
 
    width: 100%; 
 
    height: 5px; 
 
    border-radius: 10px; 
 
} 
 
.popup_survey_whitebox_progressbar_inner { 
 
    background: #0CF; 
 
    width: 100%; 
 
    height: 5px; 
 
    border-radius: 10px; 
 
    box-shadow: 0 3px 7px rgba(0, 0, 0, .25); 
 
    margin-top: -10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="popup_survey_whitebox_percent">75%</div> 
 
<br /> 
 
<div class="popup_survey_whitebox_progressbar"> 
 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div> 
 
</div> 
 
<div class="popup_survey_whitebox_percent">15%</div> 
 
<br /> 
 
<div class="popup_survey_whitebox_progressbar"> 
 
    <div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div> 
 
</div> 
 
<div class="test"></div>

來源

2015-01-05 07:32:50

進度條百分比與酒吧對齊

回答

相關問題