Javascript 如何对齐输入组插件的宽度

Javascript 如何对齐输入组插件的宽度,javascript,css,angularjs,html,Javascript,Css,Angularjs,Html,嗨,我有下面的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> <

嗨,我有下面的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>

分配图表组
{%verbatim%}
图表标题
图表组
命令
拯救
丢弃
{%endverbatim%}

但是输入组插件没有对齐。尝试使用CSS对齐,但失败。如何对齐此输入组插件?有什么建议吗?提前谢谢

那么解决方案就在于html

  • 每个标签及其父标签必须位于表单元格中
  • 每个输入选项及其父项必须位于表单元格中
  • 这里是一个片段(为所有
    td
    添加边框,然后查看对齐方式)

    
    分配图表组
    {%verbatim%}
    图表标题
    图表组
    命令
    拯救
    丢弃
    {%endverbatim%}
    
    那么解决方案就在于html

  • 每个标签及其父标签必须位于表单元格中
  • 每个输入选项及其父项必须位于表单元格中
  • 这里是一个片段(为所有
    td
    添加边框,然后查看对齐方式)

    
    分配图表组
    {%verbatim%}
    图表标题
    图表组
    命令
    拯救
    丢弃
    {%endverbatim%}
    
    您的问题不清楚。。。也许你可以给一个代码笔或JSFIDLE?您只是在使用元素,并且在元素中使用了跨距-除非您的css用于混乱对齐,否则您的所有span.input-group-addon元素都应该左对齐。您的问题不清楚。。。也许你可以给一个代码笔或JSFIDLE?您只是在使用元素,并且在元素中使用了跨距-除非您的css用于混乱对齐,否则您的所有span.input-group-addon元素都应该左对齐。这不起作用。现在输入组加载项宽度变长了。请尝试使用css将“输入组加载项宽度”设置为您想要的任何宽度。示例50px…我假设模板有一些css标准样式…它不起作用。现在输入组加载项宽度变长了。尝试使用css将“输入组加载项宽度”设置为您想要的任何宽度。示例50px…我假设模板具有一些css标准样式。。。