2表单 - 如何布局重叠元素

时间:2014-08-22 16:32:47

标签: html css forms

在1页上给出2个表单,我希望表单#2中的某些元素与表单#1中的某些元素并排。 Haven已经能够解决这个问题,因为形式#2中的元素总是落在形式#1的末尾。此外,我需要保持我的表单#2元素结构,因为它来自外部库。

<form name="form1">
    <textarea rows="10" name="tabTxBx" id="tabTxtArea" cols="50" wrap="off" ></textarea><br><br>
    Captcha image here<br>
    Type capture image:<br>
    <input type="text"><br><br>
</form>
<table width="400">
    <tr>
        <td width="200">
               <input type="submit" value="  save  "> 
        </td>
        <td>
            <!-- BEGIN: Can't alter this structure -->
            <form name='form2' method="POST" action="" onSubmit="return submitPlay();" target="sndWin">
                I want this right aligned under the textarea
                <input type="text" size="55" value="I want this right aligned under the textarea">
                <input type="button" value="I want this right aligned under the textarea">
            </form>
           <!-- END: Can't alter this structure -->
        </td>
    </tr>
</table>

另请注意: 我无法分解表格#2,暂时需要避免使用HTML5功能(对于较旧的浏览器支持)。

JS小提琴:

http://jsfiddle.net/z562wx2c/5/

1 个答案:

答案 0 :(得分:1)

您可以使用css更改表单显示,然后将第二个表单拖回到第一个位置相对的表单。我在这里更新了你的小提琴:http://jsfiddle.net/z562wx2c/8/

样式请Stackoverflows需要查看代码:

.relative {
    position: relative;
    width: 200px;
    bottom: 105px;
    left: 170px;
}

喜欢那个?

您可能希望使用正常的高度和宽度来处理textarea,因为像firefox这样的“现代”浏览器存在cols和row的严重问题。