圖標旁邊沒有換行的文本

Question

我的手風琴像這樣編寫代碼

<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上效果不好。 構造代碼和樣式以使我獲得跨瀏覽器兼容的預期效果（如屏幕截圖）的最佳方法是什么？

Answer 1

我會減少.accord-text的margin-right值，因為無論如何都使用<br> ，您實際上並不需要它，但是當空間較小時，它可能會導致換行。

Answer 2

固定

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