液体文本字段宽度

时间:2011-03-05 04:12:19

标签: css width textfield liquid-layout

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

<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属性,文本字段宽度在浏览器中也不一致。不想指定确切的宽度(特别是对于按钮)我想知道是否可以给文本字段一个液体宽度?我希望文本字段能够伸展,以便它和按钮可以放在一行上。

2 个答案:

答案 0 :(得分:2)

是的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可能看起来很奇怪,但表格单元格仅将其宽度视为建议。无论你做多么瘦,它都能适应内容。

答案 1 :(得分:1)

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

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

没有优雅的方法,但您有以下选择:

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