时间戳

首页 > 解决方案 > 如何在其两个孩子之间插入其下一个兄弟元素？

html - 如何在其两个孩子之间插入其下一个兄弟元素？

问题描述

我有如下情况：

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

table不在内部，而是form作为兄弟姐妹。但是，我想将它放在form. 由于表格大小是可变的，我不能直接top为submit. 相反， 的位置submit必须根据（即以下几个 px）的结尾table。

标签： htmlcssforms

解决方案

最后，我发现了一种仅使用 CSS 的方法，如下所示：

HTML

<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>

CSS

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

table {
  padding-bottom: 20px;
}

推荐阅读