Question

这是同一页面中的两个表格

HTML 的

<form>
  <input type="text" name="text"><br>
  <input type = "submit" class="btn btn-primary">
</form><br>

<form>
  <input type="email" name="email"><br>
  <input type = "submit" class="btn btn-default">
</form>

我希望btn-primary低于第二种形式（包含btn-default）。

Answer 1

根据 HTML5 ，您可以在输入中使用form id。 form属性指定元素所属的一个或多个表单。有关详细信息，请查看Input Attributes - HTML5

表单ID - ＆gt;指定<input>元素所属的表单元素。此属性的值必须是<form>的id属性同一文件中的元素。

所以这里，你可以做的是：将id作为form1（或者，无论你想要什么ID）。并在form="form1"中声明<input type='submit'..>，如下所示。

<form id="form1">
  <input type="text" name="text"> <br>
</form>

<br>

<form>
  <input type="email" name="email"><br>
  <input type = "submit" class="btn btn-default">
</form>

<input type="submit" class="btn btn-primary" form="form1">

Answer 2

display:flex可以在这里解决问题。

提供父元素display:flex和flex-direction: column;。在这里，我将body视为没有其他父元素。

和order:2首先形成元素。它将改变第一个表单元素顺序第二。因此，它将显示在下面。

body {
    display: flex;
    flex-direction: column;
}
form:first-child {
    order: 2;
}

<强> Working Fiddle

Answer 3

将它们的位置设置为绝对值，然后使用z-index来确定哪个位于哪个。

.positioned-divs { position:absolute; }
.positioned-divs.div-under { z-index:1; }
.positioned-divs.div-over { z-index:2; }

应该有效。

你也需要设置左/右和上/下位置，但希望你明白这一点。

如果它们在同一页面上，如何在另一个表单下方显示一个表单的按钮

3 个答案: