HTML输入控件最大可用宽度？

我在网页上有一行。它有三个控件

SomeText Input                       Button

It is like this
<div> SomeText <Input/> <img> </div>

SomeText输入按钮
是这样的
一些文字

在上图中，img向右浮动

现在我有输入大小30，但在小分辨率30太大的行，它分裂成两个

我希望输入宽度是最大可用宽度，而不是固定宽度

如果我尝试size=100%，则需要整行开始，才能完成在新行上下推送文本和img

我需要如何格式化此行？在简单情况下：

<div>
    <label for="thing">SomeText</label>
    <input type="text" id="thing" />
    <img />
</div>

div label { float: left; width: 20%; }
div input { width: 60%; }

这有点难看，因为您必须调整浮动的标记顺序（或使用绝对定位）。在这一点上，您最好放弃使用表格来获得所需的宽度：

<table><tr>
    <td class="label"><label for="thing">SomeText</label></td>
    <td class="input"> <input type="text" id="thing" /></td>
    <td class="img"> <img /></td>
</tr></table>

table { table-layout: fixed; width: 100%; }
tabel .label, table .img { width: 8em; }
table input { width: 100%; }

一些文字
表{表布局：固定；宽度：100%；}
tabel.label，table.img{width:8em；}
表输入{宽度：100%；}

有些复杂的液体布局形式往往超过CSS定位的能力，需要表格的帮助

（无论哪种方式，输入框的大小也有助于排列。）

<table><tr>
    <td class="label"><label for="thing">SomeText</label></td>
    <td class="input"> <input type="text" id="thing" /></td>
    <td class="img"> <img /></td>
</tr></table>

table { table-layout: fixed; width: 100%; }
tabel .label, table .img { width: 8em; }
table input { width: 100%; }