左右两个标签的进度条

Question

我想做一个这样的进度条

但我总是遇到对齐问题，这是我最近的输出。

我应该使用 .progress-label 但我不知道如何将它与进度条合并而不弄乱对齐。我还想要那个 "signals" 文本的模糊文本效果。

Answer 1

试试这个代码：

           <p class="pull-left media-name">FACEBOOK</p>

        <div>
            <span class="progress-label">9 signals</span>
            <span class="pull-right">60%</span>

        <div class="progress">

            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:60%"></div>
        </div>

        </div>

Answer 2

在kendoUI.

中添加左右有标签的进度条

左标签：- 不太可能

右标签：- 可能

$("#lesslikely").remove();

            var progressdata=$("#progressbar").data("kendoProgressBar");
            progressdata.progressStatus.text("<span style='float:right;'>Likely</span>");

var wrapper=$(".k-progress-status-wrap").html();

        wrapper=wrapper+'<span id="lesslikely" style="float:left;margin-left:5px;">Less Likely</span>';
        wrapper=wrapper.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
        $(".k-progress-status-wrap").html(wrapper);

左右两个标签的进度条

progress bar that has two label on left and right

html

css

twitter-bootstrap

progress-bar

text-alignment