css - 如何使文本输入框占据其右侧按钮留下的所有剩余空间？

Question

我很想在这里求助于表格，因为我似乎无法想出一些 CSS 来完成我在这里尝试创建的内容。

我有一个 <div>包含两件事的容器:

• 一个文本输入框 ( <input type='text' /> )
• 一个按钮(<input type='button' />)

我希望按钮右对齐(我没有给它一个固定的宽度，但我很容易做到)。文本输入框应直接位于按钮的左侧并占据剩余空间。这是我正在寻找的示例:

不幸的是，下面的 HTML 没有完成这个(请原谅内联样式 - 仅用于演示目的):

<input type="button" value="Test" style="float: right;" />
<input type="text" style="display: block; width: 100%;" />

我tried adding a <div> wrapper ，但这也没有用。我究竟做错了什么？我可以使用 <table> 轻松完成此操作布局，但我确定我一定遗漏了一些东西，并且有更好的方法。

Answer 1

没有<table>也是可能的, 但不是很明显。

参见: http://jsfiddle.net/thirtydot/wE7jc/2/

<input type="button" value="Test" style="float: right;" />
<div style="overflow: hidden; padding-right: 8px">
    <input type="text" style="width: 100%;" />
</div>

这个工作的原因解释了here .