html - 左右两个标签的进度条

Question

我想做一个这样的进度条

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

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

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