html - 如何用输入字段和按钮并排填充一行？

Question

CSS文件

.columnForm {
   display: inline-block;
}

html文件

<div class="row" style="height:100px;">
        <div class="col-md-9 col-md-offset-1">          
            <form class="columnForm" name="columnForm">
                <label style="font-size:12px; text-align:center;">Add a new column</label>
                <div>
                    <div class="input-group">
                        <input id="newcolumn"
                               name="newcolumn"
                               type="text"
                               ng-model="newcolumn"
                               class="form-control input-lg"
                               placeholder="enter a column name"
                               style="font-size:12px; float:left;" />
                        <button id="addButton"
                                name="addButton"
                                style="text-align:center; float:right"
                                ng-click="addColumn()"
                                class="btn btn-info form-control input-lg">
                            Add
                        </button>
                    </div>
                </div>
            </form>    
        </div>
    </div>

我希望它们并排覆盖一整行，但上面的代码将它们都放在屏幕的左侧，一个在另一个的顶部。

Answer 1

使用 input-group DIV 作为 flex 容器并让子元素增长以填充所有空间就足够了

.input-group{
  display: flex
}

.input-group > #newcolumn {
  flex-grow: 2
}

.input-group > #addButton {
  flex-grow: 1
}

<div class="row" style="height:100px;">
    <div class="col-md-9 col-md-offset-1">          
        <form class="columnForm" name="columnForm">
            <label style="font-size:12px; text-align:center;">Add a new column</label>
            <div>
                <div class="input-group">
                    <input id="newcolumn"
                           name="newcolumn"
                           type="text"
                           ng-model="newcolumn"
                           class="form-control input-lg"
                           placeholder="enter a column name"
                           style="font-size:12px; float:left;" />
                    <button id="addButton"
                            name="addButton"
                            style="text-align:center; float:right"
                            ng-click="addColumn()"
                            class="btn btn-info form-control input-lg">
                        Add
                    </button>
                </div>
            </div>
        </form>    
    </div>
</div>

更新:

如果你想让任何一个组件比另一个占用更多的空间，改变其中任何一个的 flex-grow

关于如何使用 flexbox 的信息:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/