html - 页面字段定位表单冲突的处理方法

Question

我必须制作一个看起来像下面绘画的页面，但是：

字段 1和字段4与提交 2在一个表格中

字段 2和字段3在一个（另一个）表单中，提交 1

你知道任何样式定位html组件的方法来处理它吗？

Answer 1

试试这个代码（我同意 Wivlaro ）

    <form id="form1" action="">
<br/>
    <input type="text" id="field2" value="field2"/><br/><br/>
    <input type="text" id="field3"  value="field3"/><br/><br/>
    <input type="submit" value="Submit 1" />
    </form>

<form id="form2" action="">
    <input type="text" id="field1"  value="field1"/><br/><br/>
    <input type="text" id="field4"  value="field4"/><br/><br/>
    <input type="submit" id="submit2" value="Submit 2" />   
</form>

<style>
    #field1{
        position:absolute;
        top:0;      
    }
    #form2{
        margin-top:-18px    
    }
</style>

Answer 2

我认为将字段放在他们自己的提交表单旁边会更有意义，以便用户的心理模型与应用程序的行为相匹配。

但是，如果你必须这样做，你可以使用一些像这样的 CSS for field1 将它移动到其他两个之上（只要布局相当固定）：

position:relative;
top: -100px; /* Pick an appropriate number and unit */

然后你可以给字段 1 的容器一些负的顶部填充或边距来补偿缺失的高度。

虽然很丑。