左右两个标签的进度条答案

【问题标题】：progress bar that has two label on left and right左右两个标签的进度条
【发布时间】：2015-12-07 18:57:13
【问题描述】：

我想做一个这样的进度条

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

我应该使用.progress-label，但我不知道如何将它与进度条合并而不弄乱对齐方式。我也希望在“信号”文本上产生模糊的文本效果。

【问题讨论】：

到目前为止你有什么？发布 jsfiddle 或 codepen？
jsfiddle.net/hae95z1j

标签： html css twitter-bootstrap progress-bar text-alignment

【解决方案1】：

试试这个代码：

http://jsfiddle.net/hae95z1j/2/

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

【讨论】：

【解决方案2】：

在剑道 UI 的左右添加带有标签的进度条。

左标签：- 不太可能

正确的标签：- 可能

$("#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);

【讨论】：