图标旁边没有换行的文字

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

我会减少margin-right中的.accord-text值因为您无论如何使用<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;
    }