液体文本字段宽度答案

【问题标题】：Liquid textfield width液体文本字段宽度
【发布时间】：2011-03-05 04:12:19
【问题描述】：

我有这个相当简单的表格：

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

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

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

【问题讨论】：

标签： css width textfield liquid-layout

【解决方案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 可能看起来很奇怪，但表格单元格的宽度仅作为建议。不管你做多瘦，它都会拉伸以适应内容。

【讨论】：

我应该补充一点，通常最好不要对 HTML/CSS 进行微观管理。如果是我，只需在 ems 中给文本框一些固定宽度就足够了。如果您的设计师坚持文本框和按钮与右边缘齐平，也许您需要一个新设计师？
这就是我最终要做的，尽管我使用了带有“display: table”等样式的div。但是对于输入，是否可以直接使用“display: table-cell”来设置它们的样式而不是将它们包装在 td 中？我从来没有使用过这种方法，但我被它所吸引，因为它意味着更少的 div。
它可能不是表格数据，但它是当前版本的 HTML 和 CSS 无法正确解决的经常性问题的实用解决方案。

【解决方案2】：

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

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

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

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

【讨论】：