进度条百分比与条对齐

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:

将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 的 popup_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

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

Answer 3

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

$('.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>

进度条百分比与条对齐

Progress bar percentage align with bar

html

javascript

css

jquery