Html 如何在两个子元素之间插入下一个同级元素？_Html_Css_Forms

Html 如何在两个子元素之间插入下一个同级元素？

html css forms

Html 如何在两个子元素之间插入下一个同级元素？,html,css,forms,Html,Css,Forms,我的情况如下： <body> <form> <input type="text" /> <input type="submit" /> </form> <table> ... </table> </body> ... 表不在表单中，而是作为同级表。但是，我想把它放在表单中的两个输入元素之间。由于表格大小是可变

我的情况如下：

<body>    
    <form>
        <input type="text" />
        <input type="submit" />
    </form>
    <table>
        ...
    </table>
</body>

...

表

不在

表单

中，而是作为同级表。但是，我想把它放在

表单中的两个输入元素之间。由于表格大小是可变的，我无法直接为submit
的top
样式指定固定值。相反，submit
的位置必须根据表的末尾（即下面的几个px）
请检查代码
html
或者您也可以访问给定的url-
如果您需要什么，请告诉我。
最后，我发现了一种仅使用CSS的方法，如下所示：
HTML
要做到这一点，您需要Javascript。CSS不会影响不共享父元素的元素的顺序。我不希望将表
放在表单
中（尽管我不是向下投票人），我已根据您的要求更新了代码。请检查此url-位置
是我在此处看到的唯一解决方案。在您的解决方案中，表
仍在表单中。但无论如何，谢谢你的回答。我确实从它那里得到了帮助，找到了我最终得到的解决方案。
<form>
  <input type="text" />
  <table>
    <thead></thead>
    <tbody>
      <tr>
        <td>table data 1</td>
        <td>table data 2</td>
      </tr>
    </tbody>
  </table>
  <input type="submit" />
</form>

input[type="submit"] {
  margin-top: 50px;
}

<body>
    <form>
        <input type="text" />
        <input type="submit" />
    </form>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>table data 1</td>
                <td>table data 2</td>
            </tr>
            <tr>
                <td>table data 1</td>
                <td>table data 2</td>
            </tr>
        </tbody>
  </table>
</body>

body {
  position: relative;
}
input {
  display: block;
}
input[type="submit"] {
  position: absolute;
  bottom: 0;
}

table {
  padding-bottom: 20px;
}