css – 如何使文本输入框占据按钮左侧剩余的所有剩余空间？

我很想在这里使用表格,因为我似乎无法想出一些可以完成我在这里创建的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>轻松完成此操作.布局,但我确信我必须遗漏一些东西,并且有更好的方法.

没有< 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解释.