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

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%;" />

我尝试添加一个<div>包装器,但这也不起作用.我究竟做错了什么？我可以通过<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>

这个工作的原因在这里解释.