文本有沒有下包以圖標

我有一個手風琴組成的代碼，像這樣文本有沒有下包以圖標

<label for='product-45-45' class="active"> 
<input type='checkbox' class='regular-checkbox big-checkbox ' checked='checked' id='product-45-45' 
         name='product_id_page-0[45-45]' value='45-45' data-first_price="11.99" data-second_price="" 
         data-paysys=""/> 
       <span class="accord-text"> 
        <strong>Bundle Pack:</strong> Practise every type of test</br><em>£35 for 1 year's access - 
         <strong>BEST OFFER!</strong></em> 
      </span> 
      </label>

風格

.accord-text { 
    float: right; 
    margin-right: 182px; 
    margin-top: 3px; 
}

我漂浮的範圍右則保證金右頂到文本的位置，這在Chrome瀏覽器上運行良好，但不支持Firefox。構建代碼和樣式的最佳方式是什麼，以便獲得所需的效果（如屏幕截圖），它與跨瀏覽器兼容？

來源

2016-09-27 Beep

我建議考慮CSS Flexbox的。它會改變你的生活。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – nixkuroi

謝謝，可能會有所幫助。厭倦了完善的設計，然後發現Firefox的問題 – Beep

固定

<label for='product-45-45' class="active"> 
       <input type="checkbox" style="float: left;" class="regular-checkbox big-checkbox " checked="checked" id="product-45-45" name="product_id_page-0[45-45]" value="45-45" data-first_price="11.99" data-second_price="" data-paysys=""> 

       <div class="accord-text"> 
        <strong>Bundle Pack:</strong> Practise every type of test</br><em>£35 for 1 year's access - 
         <strong>BEST OFFER!</strong></em> 
      </div> 
      </label>

和

.accord-text { 
     /*float: left;*/ 
     /*margin-right: 182px;*/ 
     margin-left: 30px; 
    }

來源

2016-09-27 16:50:31 Beep

我將減少.accord-text的margin-right值由於您使用一個<br>，無論如何，你並不真的需要它，但它可能會導致額外的換行的時候有更小的空間。

來源

2016-09-27 16:46:28 Johannes

回答

相關問題