gpt4 book ai didi

css - 对齐 twitter bootstrap 进度条和徽章

转载 作者:技术小花猫 更新时间:2023-10-29 11:29:59 27 4
gpt4 key购买 nike

我正在为我的网站使用 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,所以我不确定如何将它们对齐在同一行中。

最佳答案

试试这个 - 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>​

关于css - 对齐 twitter bootstrap 进度条和徽章,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10872248/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com