html - 数/格重叠

我的网站右上方有一个div，它会显示您的购物篮中有多少物品。如果有1位数字，则表示正常，但是如果有两位数（10、11、12等），则重叠。任何想法如何使其变得更宽泛地显示而不会重叠吗？

我提供了一个指向产品页面的链接，以便人们可以添加X数量的产品并进行测试。

http://bit.ly/17oT6Jo

<!-- Live Basket (Top Right) -->
          <div id="tr-basket">
                <div class="span4 offset4">
                  <img src="<?php echo HTTP_HOST; ?>img/basket-icon.png" class="tr-shopping-basket-icon" />
                  <div id="tr-basket-count"><?php echo number_format($basket->basketCount()); ?></div>
                  <div id="tr-basket-title">
                    <p>ITEM<?php if($basket->basketCount()!=1){ ?>S<?php } ?> IN YOUR BASKET<br />
                        <a href="<?php echo HTTP_HOST; ?>Basket"><span class="label label-info">VIEW</span>
                        <span class="label label-info">CHECKOUT</span></a>
                        <!-- <a href="<?php echo HTTP_HOST; ?>Site/MyAccount"><span class="label label-success">ACCOUNT</span></a> -->
                    </p>
                  </div>

              </div>
          </div>
          <!-- End Live Basket -->

的CSS

    #tr-basket-count {
    display: inline-block;
    font-size: 5.5em;
    color: #ef798d;
    margin-top: 25px;
}

#tr-basket-title p {
    display: block;
    margin-top: -55px;
    margin-left: 100px;
    color: #82bdc8;
    font-weight: bold;
}

#tr-basket-buttons {
    display: block;
    margin-left: 100px;
    margin-top: 0px;
}

最佳答案

问题源于以下两种情况的组合：使用浮点数，然后是内联块，最后是在所有包含<div class="span4 offset4">的块内都具有负上边距的块元素。

我要做的是将img，#tr-basket-count和#tr-basket-title浮动到左侧
并将overflow: auto应用于父div，以将内容保留在一个块格式上下文中。

确保重置p中#tr-basket-title元素上的边距。

关于html - 数/格重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20106087/