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

我很想诉诸表格，因为我似乎无法想出一些CSS来实现我在这里创建的东西。如何使文本输入框占用按钮右侧留下的剩余空间？

我有一个<div>容器包含两件事情：

一个文本输入框（<input type='text' />）
按钮（<input type='button' />）

我希望按钮右对齐（我没有给它一个固定的宽度，但我很容易）。文本输入框应该直接放在按钮的左边并占用剩余的空间。下面是一个例子就是我在寻找：

enter image description here

不幸的是，下面的HTML没有完成这个（原谅内嵌样式 - 仅用于演示目的）：

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

我tried adding a <div> wrapper，但也没有工作。我究竟做错了什么？我可以通过<table>布局轻松完成此操作，但我相信我一定会错过一些东西，并且还有更好的方法。

来源

2011-10-09 Nathan Osman

这可能没有<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。

来源

2011-10-09 04:56:33 thirtydot

“溢出：隐藏”有什么神奇之处？它做什么，为什么它是必要的？ –

P.S.感谢您的答案 - 它确实工作得很好。 –

您是否在我的答案中看到（第二个）链接？我在最初的答案后几分钟添加了它，并且很好地解释了为什么这会起作用。 – thirtydot

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

http://jsfiddle.net/4WghJ/

基本上只是包裹在一个div输入了正确的余量，以补偿按键。

来源

2011-10-09 04:59:38

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

回答

相关问题