Question

我有这个相当简单的形式：

<form action="...">
    <div>
        <input type="text" class="input-text" value="" name="text" />
        <input type="submit" class="submit" value="Submit" />
    </div>
</form>

表单位于固定宽度div（在ems中指定）内。

我希望textfield和button是一行，但即使我指定了size属性，文本字段宽度在浏览器中也不一致。不想指定确切的宽度（特别是对于按钮）我想知道是否可以给文本字段一个液体宽度？我希望文本字段能够伸展，以便它和按钮可以放在一行上。

Answer 1

是的length用于字符数，而不是宽度。

您希望文本框填充所有可用空间，而不是按钮占用的空间吗？这对于一个表是可行的（但是我一直在Stack Overflow上对建议表进行嘘声）。让我们说为了论证你使用带有display：table的DIV，但为了简单起见，我将用实际的表格标记来说明。

<table cellpadding=0 cellspacing=0 width=100%>
  <tr>
      <td><input type="text" style="width:100%"></td>
      <td style="width:0"><input type="submit"></td>
  </tr>
</table>

按钮单元格上的宽度0可能看起来很奇怪，但表格单元格仅将其宽度视为建议。无论你做多么瘦，它都能适应内容。

Answer 2

如果保留默认的提交按钮样式，其宽度将因浏览器而异。这也意味着您寻找的文本字段的宽度是一个变量。

FF：47px + 3px border
Chrome：45px + 2px边框
IE8：63px + 8px填充+ 3px边框
IE7：61px + 2px border

没有优雅的方法，但您有以下选择：

使用表格（Google正在使用表格作为搜索框）。
设置输入字段和提交按钮的样式（不推荐）。
使用脚本（不推荐）。

液体文本字段宽度

2 个答案: