如何在HTML中相对放置项目？

Question

考虑我有一个<div style="margin-top:50px">，我需要相对地放置物品。 <div>以上有一些元素。例如，我有一个<input type="text" />和一个按钮。我需要将它放在<div>的底部，文本输入位于左侧，与父级对齐，按钮与父级右侧对齐。输入文本必须填充宽度到按钮。我不想硬编码px或em。

我如何实现这一目标？

编辑：这就是它的样子。

现在我不想指定文本输入的长度。我想要的是要渲染到div右下角的按钮，文本输入必须相应地设置其宽度以填充空间。

Answer 1

哈！第一次在哪里画画？

http://jsfiddle.net/eGHjs/

（在IE7，Chrome，FF中看起来几乎相同）。

Answer 2

您至少要对按钮宽度进行硬编码以实现此目的。

<div id="container">
    <div id="bottom">
        <div><input type="text" class="text"></div>
        <input type="submit" id="submit">
    </div>
</div>

div#container {
    height: 200px;
    margin-top: 50px;
    border: 1px solid gray;
    position: relative;
    width: 100%;
}

#bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

#bottom div {
    position: relative;
    margin-right: 105px;
}

#container #bottom input.text { 
    width: 100%;
}

#submit {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
}