进度条百分比与条形对齐

Question

我正在创建一个进度条，目前百分比显示在右侧，但现在我希望百分比能够跟随该条，无论蓝条是短还是长。

我期待的例子

---

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强> 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-top的{​​{1}}：

popup_survey_whitebox_percent

请参阅Fiddle

Answer 2

您可以将百分比值的margin-left设置为等于进度条的width。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个 您只需要将文本百分比标记放在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>

试试这个 http://jsfiddle.net/e4wvyamh/