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

【问题标题】：HTML input control maximum available width?HTML输入控件最大可用宽度？
【发布时间】：2009-10-21 09:14:48
【问题描述】：

我在网页中有一行。其中有三个控件

SomeText Input                       Button

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

上面的img是向右浮动的

现在我的输入大小为 30，但在小分辨率下，30 对行来说太大了，它一分为二。

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

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

我需要如何格式化这一行？

【问题讨论】：

标签： html css

【解决方案1】：

在简单的情况下：

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

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

这是假设 SomeText 可以很好地适应任何宽度的 20%。

但也许不会。

如果你想在边上有固定大小的元素（例如8em）并从输入的宽度中减去这些元素，你需要说100% minus 16em。不幸的是，CSS 没有这样的表达式计算功能。您可以管理的最好方法是添加包装器以使 100% 与您真正想要的相对应：

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

div label { float: left; width: 8em; }
div img { float: right; width: 8em; }
div div { margin-left: 8em; margin-right: 8em; }
div div input { width: 100%; }

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

<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%; }

有些复杂的液体布局表单通常超出 CSS 定位的能力，需要表格的帮助。

（无论哪种方式，输入框的大小也可以帮助对齐。）

【讨论】：