html - 使文本框填充容器中的所有可用空间，但必须为固定按钮留出一些空间

Question

我正在制作一个可以在 iframe 中查看的 aspx 页面。该页面存在一个简单的 GridView ，页面顶部是一个文本框和一个按钮。 (搜索功能)

我想要文本框右侧的按钮，以便文本框和按钮一起填充所有可用宽度。该按钮具有固定宽度。只有文本框具有动态宽度。

我一直在寻找这个，但仍然没有找到解决这个 CSS 问题的方法。你们有谁知道我必须使用什么 CSS 来解决我的问题，所以它看起来像下面的方案？

[TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEXTBOX] [BUTTON]
/----------------------------------------------\
|----------------------------------------------|
|-----------------GRIDVIEW---------------------|
|----------------------------------------------|
|----------------------------------------------|
|----------------------------------------------|
\----------------------------------------------/

谢谢!

Answer 1

我没有找到真正优雅的东西，但我为您提供了 3 个选项。

使用 javascript 设置文本框宽度。

textBox.width = textBox.Parent.width - button.width

在 absolute 中使用 100%(或几乎)宽度的文本框并将按钮放在它上面

<div style="position:relative">
  <input type="button" style="float:right" value="search or what not" />
  <input type="text" style="width:100%; position:absolute; top:0px; z-index:-1 " />
  <br style="clear:both" />
</div>

使用表格

<table width="100%">
    <tr><td>
        <input type="text" style="width:100%" />
    </td><td width="100">
        <input type="button" value="search or what not" />
    </td></tr>
</table>