我怎麼能對準插件箱引導 - HTML

Question

我在這裏的問題是，我的「強迫症」是我的命：

https://jsfiddle.net/3esrpdLt/1/

<table style="width:100%;"> 
<tr> 
    <td class="quoteprice"> 
     <div class="form-group"> 
      <label>Subtotal: &nbsp;</label> 
     </div> 
    </td> 
    <td> 
     <div class="input-group"> 
      <div class="input-group-addon currency">$</div> 
      <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="quoteprice"> 
     <div class="form-group"> 
      <label>ITBIS: &nbsp;</label> 
     </div> 
    </td> 
    <td> 
     <div class="input-group"> 
      <div class="input-group-addon currency">$</div> 
      <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="quoteprice"> 
     <div class="form-group"> 
      <label>Descuento: &nbsp;</label> 
     </div> 
    </td> 
    <td> 
     <div class="input-group"> 
      <div class="input-group-addon currency">%</div> 
      <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class="quoteprice"> 
     <div class="form-group"> 
      <label>Total: &nbsp;</label> 
     </div> 
    </td> 
    <td> 
     <div class="input-group"> 
      <div class="input-group-addon currency">$</div> 
      <input value="<?php echo isset($invoice['data']['subTotal']) ? $invoice['data']['subTotal']: ''; ?>" type="number" class="form-control" name="data[subTotal]" id="subTotal" placeholder="Subtotal" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"> 
     </div> 
    </td> 
</tr> 

正如你可以上的jsfiddle問題看當我使用'％'圖標時，它會比其他圖標稍大一些，有沒有辦法阻止這種情況發生？

Answer 1

這一點，如果你想他們都添加到您的CSS更大：

.input-group-addon { 
    min-width: 40px; 
} 

，或者，如果你想%下調，用途：

.input-group-addon { 
    max-width: 33px; 
} 

是this你想要什麼？