5

我正在为我的网站使用 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 -->

但是 bade 和进度条不会并排对齐。我不太擅长css，所以我不确定我能做些什么来将它们对齐在同一行。

4

1 回答 1

9

试试这个 - 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>​
于 2012-06-03T17:06:02.297 回答