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

しかし、バーデとプログレスバーは横に並んでいません。私は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 に答える