Как разместить кнопки горизонтально в форме

Question

Как разместить кнопки горизонтально в форме

0

В моем угловом приложении у меня есть типичная форма ввода данных со следующими тремя кнопками в конце:

<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 кнопки расположены вертикально. Что такое синтаксис CSS, чтобы разместить все 3 из них по горизонтали?

Eugene Goldberg 18 фев. 2014, в 21:38

Источник

Теги:

html

css3

3 ответа

5

Удалены <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;
    }

ДЕМО: JSFIDDLE
Чтобы удалить пробел между кнопками, см. " Борьба с пространством между встроенными блочными элементами"

88 MPG 18 фев. 2014, в 17:55

0

Не окружайте кнопки элементами 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>

Majed 18 фев. 2014, в 19:12

Ещё вопросы

Jatin · Accepted Answer · 2014-02-18T19-03-00.000Z

Просто используйте:

.form-group {
    float:left;
}

Рабочий пример

Надеюсь это поможет.