Question

使用以下HTML：

<span class="label label-default record"> Total <span class="label badge-number">12</span></span><br>
<span class="label label-warning record"> Pending <span class="label badge-number">5</span></span><br>
<span class="label label-success record"> Active <span class="label badge-number">6</span></span><br>
<span class="label label-important record"> Inactive <span class="label badge-number">1</span></span>

和CSS：

.record {
width: 84px;
height: 16px;
padding: 3px 0 3px 5px;
margin-bottom:2px;
}

.badge-number {
background-color: #666;
width: 26px;
height: 18px;
float: right;
text-align: right;
margin: -3px 0 0 0;
-webkit-border-bottom-left-radius:0;
-moz-border-bottom-left-radius:0;
border-bottom-left-radius:0;
-webkit-border-top-left-radius:0;
-moz-border-top-left-radius:0;
border-top-left-radius:0;
}

http://jsfiddle.net/eWSRX/

左边是Chrome（最新版），右边是Firefox（v24）和IE8

screenshot

Chrome的屏幕截图就是我想要的......

Answer 1

没有必要嵌套元素来获得你想要的东西。 Twitter并没有打算这样做，而且它引起了比你需要更多的麻烦。这是一个选项：

http://jsfiddle.net/eWSRX/1/

<span class="label label-default record"> Total </span>
<span class="label badge-number">12</span>
...

.label {
    float: left; /* OR display: inline-block */
    height: 18px;
    padding: 3px;
}
.record {
    width: 84px;
    margin-bottom:2px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.badge-number {
    background-color: #666;
    width: 26px;
    text-align: right;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

Bootstrap：span内部跨度不能在Firefox和IE上显示

1 个答案: