如何显示编辑和删除按钮在1行从两个表单？

Question

我有两个表单，底部分别有一个按钮来更新和删除数据。我想把按钮放在一行上。

问题是，当我使用"div类行“将按钮放置在同一行并在两个窗体之间保持打开时(请参阅代码)，当我按data按钮时，我的数据就会被删除。如果我关闭了"div类行“，那么这些按钮自然会正常工作，但它们现在位于不同的行上。

我怎么才能解决这个问题？谢谢你的帮助。

## Leave the class open ==> Update      Delete

        <form method="POST" action="/tasks/{{ $event->id }}" >
            @csrf
            @method('PATCH')

            ...

        <div class="row">

            <div class="col-4 offset-1">
                    <button type="submit" class="btn btn-block btn-primary">Update</button>
                </div>
        </form>
        <form action="/tasks/{{$task->id}}" method="post">
        @csrf
        @method('DELETE')
                <div class="col-4 offset-2">
                    <button type="submit" class="btn btn-block btn-danger">Delete</button>
                </div>
            </div>
        </form>

## Leave the class open ==> Update
                                         Delete

        <form method="POST" action="/tasks/{{ $event->id }}" >
            @csrf
            @method('PATCH')

            ...

            <div class="col-4 offset-1">
                    <button type="submit" class="btn btn-block btn-primary">Update</button>
                </div>
        </form>

        <form action="/tasks/{{$task->id}}" method="post">
        @csrf
        @method('DELETE')
                <div class="col-4 offset-6">
                    <button type="submit" class="btn btn-block btn-danger">Delete</button>
                </div>
            </div>
        </form>

Answer 1

创建一个具有display的类，并根据您希望实现的目标对齐子类。以下是一些讲座：https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

Answer 2

您可以在div中插入所有表单。因此，与其用表单标记包装它们，不如用div包装它们，然后将表单放在div中。这样，您就可以更容易地使用col类来安排按钮。

<div class="col-4 offset-6">
       <form action="/tasks/{{$task->id}}" method="post">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-block btn-danger">Delete</button>
        </form>
</div>