如何使文本输入框占据其右侧按钮留下的所有剩余空间？
我很想在这里求助于表格，因为我似乎无法想出一些 CSS 来完成我在这里尝试创建的内容。
我有一个
- 一个文本输入框 (
) - 一个按钮 (
）
我希望按钮右对齐（我没有给它固定的宽度，但我很容易就能做到）。文本输入框应位于按钮的正左侧并占据剩余空间。这是我正在寻找的示例：
不幸的是，以下 HTML 无法实现此目的（请原谅内联样式 - 仅用于演示目的）：
<input type="button" value="Test" style="float: right;" />
<input type="text" style="display: block; width: 100%;" />
我 尝试添加
布局轻松完成此任务，但我确信我一定错过了一些东西，并且有更好的方法来做到这一点。
I'm tempting to resort to tables here since I cannot seem to come up with some CSS that will accomplish what I'm trying to create here.
I have a <div> container that contains two things:
- a text entry box (
<input type='text' />) - a button (
<input type='button' />)
I want the button right-aligned (I haven't given it a fixed width, but I easily could). The text entry box should be directly left of the button and take up the remaining space. Here is an example of what I'm looking for:
Unfortunately, the following HTML isn't accomplishing this (pardon the inline styles - for demonstration purposes only):
<input type="button" value="Test" style="float: right;" />
<input type="text" style="display: block; width: 100%;" />
I tried adding a <div> wrapper, but that didn't work either. What am I doing wrong? I could accomplish this easily with a <table> layout, but I'm sure I must be missing something and that there is a better way of doing it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
没有
也是可以的，但不是很明显。参见： http://jsfiddle.net/thirtydot/wE7jc/2/
原因此处对此作品进行了解释。
It's possible without
<table>, but it's not very obvious.See: http://jsfiddle.net/thirtydot/wE7jc/2/
The reason this works is explained here.
只要您不介意固定宽度的按钮，就应该这样做：
http://jsfiddle.net/4WghJ/< /a>
基本上只是将输入包裹在一个带有右边距的 div 中以补偿按钮。
As long as you don't mind a fixed width button, this should do:
http://jsfiddle.net/4WghJ/
Basically just wrapped the input in a div with a right margin to compensate for the button.