Html Laravel-如何在两个表单的一行上显示编辑和删除按钮？

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

问题是当我使用“div class row”将按钮放在同一行上，并在两个表单之间保持打开状态时（请参见代码） 当我按下“取消更新”按钮时，我的数据被删除。如果我关闭“div class行”，那么按钮自然可以正常工作，但它们现在位于不同的行上

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

## 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>

##保持类打开==>更新删除
@csrf
@方法（'补丁'）
...
更新
@csrf
@方法（'DELETE'）
删除
##保持类打开==>更新
删除
@csrf
@方法（'补丁'）
...
更新
@csrf
@方法（'DELETE'）
删除

使用display flex创建一个类，并根据您希望实现的目标对齐子类。 下面是一些讲座：

---

使用display flex创建一个类，并根据您希望实现的目标对齐子类。 下面是一些讲座：

---

您只需将所有表单插入div中。因此，您不需要使用表单标签将表单包装，而是希望使用div将表单包装，然后将表单放入div中。这样，您可以更轻松地使用col md class排列按钮

<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>

@csrf
@方法（'DELETE'）
删除

您只需在div中插入所有表单。因此，您不需要使用表单标签包装表单，而是希望使用div包装表单，并将表单放入div中。这样，您可以更轻松地使用col md class安排按钮

<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>

@csrf
@方法（'DELETE'）
删除

是的，这是一个棘手的问题。您是否考虑过使用JavaScript作为删除按钮

将按钮类型更改为button，并将

onclick

属性添加到按钮，然后单击提交删除表单

    <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>
            <div class="col-4 offset-2">
                <button type="button" class="btn btn-block btn-danger" 
                onclick="event.preventDefault(); 
                        document.getElementById('delete-task-form').submit();"
                ">Delete</button>
            </div>

        </div>
    </form>
    <form action="/tasks/{{$task->id}}" id="delete-task-form" method="post">
        @csrf
        @method('DELETE')
    </form>

@csrf
@方法（'补丁'）
...
更新
id}“id=”删除任务表单“method=”post“>
@csrf
@方法（'DELETE'）

是的，这是一个棘手的问题。您是否考虑过使用JavaScript作为删除按钮

将按钮类型更改为button，并将

onclick

属性添加到按钮，然后单击提交删除表单

    <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>
            <div class="col-4 offset-2">
                <button type="button" class="btn btn-block btn-danger" 
                onclick="event.preventDefault(); 
                        document.getElementById('delete-task-form').submit();"
                ">Delete</button>
            </div>

        </div>
    </form>
    <form action="/tasks/{{$task->id}}" id="delete-task-form" method="post">
        @csrf
        @method('DELETE')
    </form>

@csrf
@方法（'补丁'）
...
更新
id}“id=”删除任务表单“method=”post“>
@csrf
@方法（'DELETE'）

或者

@Robbin Benard——太棒了！我怎么不知道这个存在？！或者也许

@Robbin Benard——太棒了！我怎么不知道这个存在？！这没有帮助。因为我仍然需要将行的div保持为打开状态，以便将它们放在一行上，然后我仍然遇到一个问题，我的编辑按钮作为删除按钮运行。我无法将表单包装在标记中，因为我有属于此表单的编辑按钮的输入字段可供编辑。这没有帮助。因为我仍然需要将行的div保持为打开状态，以便将它们放在一行上，然后我仍然遇到一个问题，我的编辑按钮作为删除按钮运行。我无法将表单包装在标记中，因为我有属于此表单的编辑按钮的输入字段，用于编辑。