对齐 twitter bootstrap 进度条和徽章答案

【问题标题】：align twitter bootstrap progress bar and badge对齐 twitter bootstrap 进度条和徽章
【发布时间】：2012-06-07 23:47:53
【问题描述】：

我正在为我的网站使用 twitter 引导程序。我想使用进度条来指示该过程的完成百分比。

在进度条中，我想显示进程中步骤的名称，并在进度条的末尾或开头使用徽章来显示完成百分比。这是我正在尝试做的 JS 小提琴链接

http://jsfiddle.net/KBTy7/12/

<div id="coolstuff" style="margin-top: 10px;">
    <span class="badge" style="padding: 3px; width: 10px">10%</span>
    <div class="progress" id="prgbar">
        <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth">Add New PO Detail</div>
    </div><!-- end of progress bar -->
</div> <!-- end of cool stuff -->

但是指示条和进度条不会并排对齐。我不太擅长 css，所以我不确定如何将它们对齐在同一行中。

【问题讨论】：

标签： css twitter-bootstrap progress-bar badge twitter-bootstrap-2

【解决方案1】：

试试这个 - http://jsfiddle.net/KBTy7/412/

<html>
    <body>
        <div id="coolstuff" style="margin-top: 10px;">
            <span class="badge" style="padding: 3px; float: left; width: 25px; text-align: center;">10%</span>
            <div class="progress" id="prgbar">
                <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth"> Add New PO Detail </div>
            </div><!-- end of progress bar -->
        </div> <!-- end of cool stuff -->
    </body>
</html>

【讨论】：

工作得很好...下次“Float”我会记得的：）谢谢
由于时间限制，不允许我将其标记为答案..一旦解除就可以了