號碼/ Div重疊

我在我的網站的右上角有一個div，更新顯示您的購物籃中有多少物品。如果有1位數字，則顯示正常，但如果是兩位數字（10,11,12等），則重疊。任何想法如何讓它變得越來越寬，以顯示沒有重疊？號碼/ Div重疊

我提供了產品頁面的鏈接，以便人們可以添加X數量的產品和測試。

<!-- 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; 
}

來源

2013-11-20 JordanC26

你能否提供其他元素的CSS，如img和前兩個div？ – brouxhaha

試試這個：

#tr-basket-title 
{ 
    float: right; 
}

添加float: right這個元素：<div class="span4 offset4" style="float: right; margin-left: 0"></div>

Example

來源

2013-11-20 20:41:15 Tomzan

他正在使用Bootstrap，因此調整'.span4'和'.offset4'會導致其他問題。 –

檢查編輯，無需更改類 – Tomzan

覆蓋原始定義是本地化的方式，內聯樣式是其中一種方式。 –

該問題源自於使用浮點數，後跟inline-block，最後是包含<div class="span4 offset4">包含塊的負頂部邊距的塊元素。

我會做的是浮動img，#tr-basket-count和#tr-basket-title向左和應用overflow: auto父div來保持對事物的一個塊格式化的內容。

請務必重置p元素的邊距#tr-basket-title。

來源

2013-11-20 20:41:25

回答

相關問題