html - 分词 css 未相应对齐

Question

有没有办法让单词正确对齐？我尝试添加 word-break 和 word-wrap 属性，但没有任何不同。

<div class="transreview" style="float: right; background-color: #e0e0e0;   word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px;">

    <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">

    <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Subtotal</b></label>

     <div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
</div>

    <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">

    <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>

    <div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
    </div>
</div>

Answer 1

把它变成一个表格。我做了一个Fiddle .只需调整 CSS，您应该会得到相同的结果。但是不要添加内联 CSS!

HTML

<table>
    <tbody>
        <tr>
            <td>
                Subtotal
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Total Shipping
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Tax
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Discount
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Total (including tax, if applicable)
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
    </tbody>
</table>

CSS

table{
    background-color: #E0E0E0;
    border-radius: 5px;
    padding: 4px 0;
}

td label{
    background-color: #FFF;
    border-radius: 5px;
    padding: 4px 4px 4px 20px;
}

td{
    padding: 4px;
}