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

Question

我无法想出一些能够完成我尝试创建的东西的CSS样式，因此在这里我尝试使用表格。我有一个

容器，其中包含两个元素：

• 文本输入框 (<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> 布局可以轻松完成此操作，但我确定我肯定错过了什么，而且有更好的方法来实现它。

- Nathan Osman

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>

这能够生效的原因在这里有解释。

- thirtydot

---

“'overflow: hidden'”有什么神奇之处？它是做什么的，为什么必要？ - Nathan Osman

你看到我回答中的（第二个）链接了吗？我在最初的回答之后几分钟添加了它，它很好地解释了为什么这样可以工作。 - thirtydot

如果您需要输入框具有填充，则必须添加 -[vender]-box-sizing:border-box，否则输入框将被 overflow:hidden 裁剪。 - Pwner

Answer 2

只要您不介意一个固定宽度的按钮，这个方法就可以解决问题：

基本上只需将输入框包装在一个带有右边距的div中即可弥补按钮的影响。 http://jsfiddle.net/4WghJ/

- James Montagne