如何对齐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>