Metods處理形式的衝突在現場定位

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這樣的字段1把它移到其他兩個以上（只要佈局是相當固定的）：

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

然後你可以給場地1的容器一些負面的頂部填充物或邊緣以彌補缺失的高度。

雖然很醜。