如何對齊input-group-addon的寬度

Question

嗨，我有以下html文件，其中包含3個輸入選項。如下

<script type="text/ng-template" id="dashboard_assigngroup_popup.html"> 

    <div class="modal-header modal-header2"> 
     <h3 class="modal-title">Assign Chart Group</h3> 
    </div> 

    <div class="modal-body"> 
     <table class="table"> 
      {%verbatim %} 

      <tr> 
       <td> 
        <div class="input-group" style="padding:1%;"> 
         <span class="input-group-addon">Chart title</span> 
         <select type="input" class="form-control" ng-model="final_data.info" ng-options="m.id as m.title for m in chartlist" required ng-cloak> 
         </select> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div class="input-group" style="padding:1%;"> 
         <span class="input-group-addon">Chart group</span> 
         <select type="input" class="form-control" ng-model="final_data.group" ng-options="c.id as c.name for c in chartgrouplist" required ng-cloak> 
         </select> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="5"> 
        <div class="input-group" style="padding:1%;"> 
         <span class="input-group-addon">Order </span> 
         <input type="input" class="form-control" placeholder="Order" ng-model="final_data.orderg"> 
        </div> 
       </td> 
      </tr> 

      <tr> 
       <td colspan="4"> 
        <div class="modal-footer"> 
         <button class="btn btn-success" type="button" ng-click="submit()" id="submit">Save</button> 
         <button class="btn btn-grey" type="button" ng-click="cancel()">Discard</button> 
        </div> 
     </table> 
     {% endverbatim %} 
    </div> 

</script> 

但input-group-addons沒有對齊。試圖使用CSS對齊，但沒有這樣做。我如何對齊這個input-group-addons？任何建議傢伙？提前致謝。

Answer 1

然後解決之道在於你的HTML

1. 每個標籤連同其母公司必須在表格單元格
2. 每個輸入選項及其家長必須在表格單元格

這裏是一個片段（爲所有td添加邊框並看到對齊）

<script type="text/ng-template" id="dashboard_assigngroup_popup.html"></script> 
 
    <div class="modal-header modal-header2"> 
 
     <h3 class="modal-title">Assign Chart Group</h3> 
 
    </div> 
 

 
    <div class="modal-body"> 
 
     <table class="table"> 
 
      {%verbatim %} 
 

 
      <tr> 
 
       <td class="input-group" style="padding:1%;"> 
 
       <span class="input-group-addon">Chart title</span> 
 
         
 
       </td> 
 
       <td> 
 
       <select type="input" class="form-control" ng-model="final_data.info" ng-options="m.id as m.title for m in chartlist" required ng-cloak></select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <span class="input-group-addon">Chart group</span> 
 
       </td> 
 
      <td> 
 
       <select class="input-group" style="padding:1%;"> </select> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="input-group" style="padding:1%;"></div> 
 
         <span class="input-group-addon">Order </span> 
 
       </td> 
 
       <td> 
 
        <input type="input" class="form-control" placeholder="Order" ng-model="final_data.orderg"> 
 
       </td>     
 
      </tr> 
 

 
      <tr> 
 
       <td colspan="4"> 
 
        <div class="modal-footer"> 
 
         <button class="btn btn-success" type="button" ng-click="submit()" id="submit">Save</button> 
 
         <button class="btn btn-grey" type="button" ng-click="cancel()">Discard</button> 
 
        </div> 
 
     </table> 
 
     {% endverbatim %} 
 
    </div> 
 

 
</script>