在页面上处理字段定位中的表单冲突的方法

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场的容器带来一些负顶部填充或边距以补偿缺失的高度。

虽然很难看。