Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 2个表单-如何布局重叠元素_Html_Css_Forms - Fatal编程技术网

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

Html 2个表单-如何布局重叠元素,html,css,forms,Html,Css,Forms,给定一页上的两个表单,我希望表单#2中的一些元素与表单#1中的一些元素并排。我还没有弄明白这一点,因为我在表单2中的元素总是落在表单1的末尾下面。此外,我还需要保持表单2元素结构的灵活性,因为它来自外部库 <form name="form1"> <textarea rows="10" name="tabTxBx" id="tabTxtArea" cols="50" wrap="off" ></textarea><br><br>

给定一页上的两个表单,我希望表单#2中的一些元素与表单#1中的一些元素并排。我还没有弄明白这一点,因为我在表单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小提琴:


您可以使用css更改表单显示,并使用相对位置将第二个表单拖回第一个表单。我在这里更新了你的小提琴:

样式以满足Stackoverflows需要查看代码:

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


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

ok,然后将表单显示为:inline;所以他们不会破坏你的布局你需要HTML5来支持嵌套表单,所以。。你真走运。也许你应该写下你想要实现的目标,我相信有更好的方法:)当然有一种方法可以使用CSS将表单重新定位到我需要的位置?是的,但是你说你需要在表单1中使用表单2。。你的意思是仅仅在视觉上?不确定我是否正确,但你可以使用一些CSS非常接近…有没有一种方法可以不使用form2坐标硬编码并使用form2,这样当用户调整其大小时,它会跟随屏幕上的文本区域向上/向下移动?