图标旁边没有换行的文本

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