0

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

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

表单位于一个固定宽度的 div 内（以 ems 指定）。

我希望文本字段和按钮是单行，但是即使我指定了它的size属性，跨浏览器的文本字段宽度也是不一致的。不想指定确切的宽度（尤其是按钮）我想知道是否可以给文本字段一个液体宽度？我希望文本字段可以拉伸，以便它和按钮都可以放在一行上。

4

2 回答 2

2

是length的，是为了字符数，而不是宽度。

您希望文本框填充按钮占用的所有可用空间吗？这可以通过一张桌子来实现（但我一直在 Stack Overflow 上因为建议桌子而受到嘘声）。假设为了论证，您将 DIV 与 display:table 一起使用，但为了简单起见，我将使用实际的表标记进行说明。

<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 可能看起来很奇怪，但表格单元格的宽度仅作为建议。无论您制作多么瘦，它都会拉伸以适应内容。

于 2011-03-05T04:24:38.643 回答
1

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

  • FF：47px + 3px 边框
  • Chrome：45px + 2px 边框
  • IE8：63px + 8px padding + 3px 边框
  • IE7：61px + 2px 边框

没有优雅的方法可以做到这一点，但您有以下选择：

  • 使用表格（Google 使用表格作为其搜索框）。
  • 设置输入字段和提交按钮的样式（不推荐）。
  • 使用脚本（不推荐）。
于 2011-03-05T09:42:39.933 回答