text with no wrap next to icon

Question

I have an accordion made up code like so

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

style

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

I floated the span right then margin right and top to position the text, this works fine on chrome but not Firefox. What is the best way of constructing the code and styling so that I get the desired effect (like the screen shot) that is cross browser compatible?

Answer 1

我会减少.accord-text的margin-right值，因为无论如何都使用<br> ，您实际上并不需要它，但是当空间较小时，它可能会导致换行。

Answer 2

fixed

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

and

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