Question

在我的角度应用程序中，我有一个典型的数据输入表单，最后有三个按钮：

<div class="form-group">
    <div>
        <button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
    </div>
</div>
<br />
<div class="form-group">
    <div>
        <button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
    </div>
</div>
<br />
<div class="form-group">
    <div>
        <button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
    </div>
</div>

目前，所有3个按钮都是垂直堆叠的。将所有3个水平放置的CSS语法是什么？

Answer 1

删除了<br>和额外的<div>代码

HTML：

<div class="form-group">
   <button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
<div class="form-group">
   <button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
<div class="form-group">
   <button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>

CSS：

 .form-group {
        display: inline-block;
    }

DEMO：JSFIDDLE
要删除按钮之间的空格，请参阅Fighting the Space Between Inline Block Elements

Answer 2

只需使用：

.form-group {
    float:left;
}

Working Example

希望这有帮助。

Answer 3

不要用div元素包围按钮

<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
<button id="button2id" name="button2id" class="btn btn-default">Cancel</button>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>

如何在表单中水平放置按钮

3 个答案: