진행률 막대 비율 막대에 맞 춥니 다

Question

진행률 막대를 만드는 중입니다. 현재 오른쪽에 백분율이 표시되지만 파란색 막대가 짧거나 길어도 백분율을 막대 뒤에 올릴 수 있습니다.

예 내가 기대

---

.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>

Answer 1

HTML :

,691 popup_survey_whitebox_progressbar_inner 내부

이동 popup_survey_whitebox_percent :

<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

Answer 2

보기 퍼크 ProgressBar의 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/

Answer 3

당신은 진행률 표시 줄의 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>