css - 液体文本字段宽度

Question

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

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

表单位于固定宽度的 div 中(以 em 指定)。

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

Answer 1

是的，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 可能看起来很奇怪，但表格单元格仅将其宽度用作建议。无论您做得多瘦，它都会拉伸(stretch)以适应内容。