进度条百分比与酒吧对齐

我正在创建一个进度条，目前百分比显示在右侧，但现在我希望百分比能够跟随酒吧，不管蓝色酒吧是短还是长。进度条百分比与酒吧对齐

的例子，我希望

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

进度条百分比与酒吧对齐

回答

相关问题