Html 左右两侧带有徽章的Twitter引导进度条

我想有一个progressbar，两边都有左右对齐的徽章，在一行中居中

与此类似：

这是我目前为止没有用的东西

<div class='row-fluid'>
   <div class="span12" style="">
      <span class="badge" style="position: relative;">X</span>
      <div class="progress" style="position: relative; margin: 0 auto;width:50%;">
         <div class="bar" style="width:10%;"></div>
      </div>
      <span class="badge" style="position: relative;">0</span>
   </div>
</div> 

X
0

查看问题的答案

问题是，必须将放置在div中，但div是块元素，因此它会在其周围的元素之间创建换行符。要改变这种行为，你必须改变周围事物的风格

要使左侧标记与进度条内联，请将

Class=“向左拉”

或

Style=“float:left；”“

添加到第一个标记

要在线获取正确的徽章，您必须确保进度条不会占据屏幕的整个宽度，这会将第二个徽章撞到底部。例如，如果所有三个项目都在一个div中，且其类为

span8

，则仅使进度条具有

span6

X
0

对于我自己的问题，我有一个解决方案，使用*gasp*一张桌子…但它确实保持了整个内容的中心，并且不会改变横条的高度，等等。如果有人可以发布一个非桌子版本，我肯定会接受这个答案

代码如下：

<div class='row-fluid'>
    <div class="span12">
        <table style="width: 80%;margin:0 auto;">
            <tr>
                <td style="width: 15%;padding-right:3px;">
                    <span class="badge" style="float:right;">X:</span>
                </td>
                <td style="width: 70%;">
                    <div class="progress" style="margin-bottom: 0px;">
                        <div  id="xbar" class="bar" style="width: 50%;"></div>
                    </div>
                </td>
                <td style="width: 15%;padding-left:3px;">
                    <span id="xval" class="badge" style="float:left;">0</span>
                </td>
            </tr>
        </table>
    </div>
</div>

X:
0

是否会

前置

和

追加

做什么？你可以使用：before和：after CSS psuedo选择器吗？@KyleMit我使用了Prepend和Append，但所做的只是将徽章钉在顶部和底部，而不是左侧和右侧。@michaellee psuedo元素只是在前面或后面添加了一个不可见的元素。如果没有一个例子，我无法想象这会有什么帮助。如果它在一行流体中，它将无法正确居中。另外，当在一排流体中时，progressbar高度更改为30px，我无法更改它。我更新了JSFIDLE来告诉你我的意思