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

【问题标题】：How to make a text entry box take up all remaining space left by the button to its right?如何使文本输入框占用右侧按钮留下的所有剩余空间？
【发布时间】：2011-10-09 04:45:07
【问题描述】：

我很想在这里使用表格，因为我似乎无法想出一些 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> 布局轻松完成此操作，但我确信我一定遗漏了一些东西，并且有更好的方法来做到这一点。

【问题讨论】：

标签： css html input right-align

【解决方案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。

【讨论】：

'overflow: hidden' 有什么神奇之处？它有什么作用，为什么有必要？
您在我的回答中看到（第二个）链接了吗？我在最初的答案几分钟后添加了它，它很好地解释了为什么这样做。
如果需要输入框有内边距，则必须加上-[vender]-box-sizing:border-box，否则输入框会被overflow:hidden剪裁。

【解决方案2】：

只要您不介意固定宽度的按钮，就应该这样做：

http://jsfiddle.net/4WghJ/

基本上只是将输入包装在一个带有右边距的 div 中以补偿按钮。

【讨论】：