logo标签列表

对齐 Twitter Bootstrap 进度条和徽章

csstwitter-bootstrapprogress-barbadgetwitter-bootstrap-2
5
我正在使用Twitter Bootstrap建立网站。我想使用进度条来显示过程的完成百分比。
在进度条中，我想显示过程中的步骤名称，并在进度条的开始或结尾使用徽章来显示完成百分比。 这是我想要做的JS Fiddle链接。

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，所以不确定我能做什么来使它们在同一行上对齐。
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>​
完美地工作了...下次我会记住使用“浮点数” :) 谢谢 - Neel
因为一些时间限制，它不允许我将其标记为答案。一旦限制解除，我会立即标记的。 - Neel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接