javascript - 图标旁边没有换行的文字

Question

我有一个像这样的 Accordion 代码

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

我将 span 向右浮动，然后将 margin right 和 top float 以定位文本，这在 chrome 上运行良好，但在 Firefox 上运行良好。构建代码和样式的最佳方式是什么，以便获得跨浏览器兼容的预期效果(如屏幕截图)？

Answer 1

我会减少 margin-right .accord-text 中的值由于您使用 <br>无论如何，您并不是真的需要它，但是当空间较少时它可能会导致额外的换行。