Question

有没有办法让我能正确对齐这个词？我尝试添加word-break和自动换行属性，但它没有任何不同。

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

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

Answer 2

您必须为父容器和标签设置固定宽度。请检查http://jsfiddle.net/fanafazil/rcye5m36。

<div class="transreview" style="float: right; background-color: #e0e0e0;   word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px; width: 210px;">
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Sub Total</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Tax</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Discount</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping(Including Tax and VAT)</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
</div>

word-break css没有相应地对齐

2 个答案: