Как сделать две кнопки встроенными, если каждая из них имеет разную форму?

Question

Как я могу сделать кнопки отправки в двух разных формах встроенными?Первая форма должна быть элементом уровня блока, а вторая - inline-block.

<form action="#">
     <div class="form-group">
        <label for="title">Title</label>
        <input type="text" name="title" class="form-control" id="title" placeholder="Enter title">
    </div>

    <div class="form-group">
        <label for="body">Body</label>
        <textarea class="form-control" name="body" id="body" rows="10"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Update</button>

</form>

<form action="#">
    <button type="submit" class="btn btn-danger">DELETE</button>
</form>

Answer 1

Float - очень хороший выбор для использования ... Но мы также можем использовать дисплей: inline;Свойство для элемента формы ... Как это ..

Предложение: -

   form{
       display: inline;
     }

Это также лучший вариант ... И показ в строке несет разрыв между элементами ...Так что кнопки удаления и обновления будут выглядеть хорошо.

Answer 2

Просто переместите кнопку delete в другой тег формы.Это должно работать.

<form action="#">
     <div class="form-group">
        <label for="title">Title</label>
        <input type="text" name="title" class="form-control" id="title" placeholder="Enter title">
    </div>

    <div class="form-group">
        <label for="body">Body</label>
        <textarea class="form-control" name="body" id="body" rows="10"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Update</button>

    <form action="#">
    <button type="submit" class="btn btn-danger">DELETE</button>
    </form>

</form>