html - 2 个 HTML 表单并排

Question

我需要在页面中放置一个确认按钮和一个取消按钮。

我选择创建具有不同操作的表单，但是 2 个按钮(表单)没有并排显示。

没有表格我们怎么办？

谢谢!

Answer 1

您可以在没有 float 的情况下执行此操作，如果您将表单和其中的每个元素设置为内联显示，那么它们将彼此相邻。它们不并排的原因是因为表单，就像 div 和段落一样是 block 级元素，将它们设置为内联显示将解决这个问题。

例如

.button-container form,
.button-container form div {
    display: inline;
}

.button-container button {
    display: inline;
    vertical-align: middle;
}

使用以下 HTML

<div class="button-container">
    <form action="confirm.php" method="post">
        <div>
            <button type="submit">Confirm</button>
        </div>
    </form>

    <form action="cancel.php" method="post">
        <div>
            <button type="submit">Cancel</button>
        </div>
    </form>
</div>