Html 如何使输入文本字段具有所有可用宽度？

我试图将输入文本字段拉伸到可用宽度（减去边距）。这是行不通的。为什么?

  <div style="background:yellow; padding:5px;">
    <input id="test-input" type="text" />
  </div>
  <style type="text/css">
    * { box-sizing: border-box; }
    #test-input {
        margin-left: 10px;
        margin-right: 10px;
        width: auto;
        display: block;
        border: 1px black solid;
    }
  </style>

*{框大小：边框框；}
#测试输入{
左边距：10px；
右边距：10px；
宽度：自动；
显示：块；
边框：1px黑色实心；
}

您可以使用CSS3函数计算

宽度

，不包括左/右边距，如下所示：

#测试输入{
左边距：10px；
右边距：10px；
宽度：计算（100%-20px）；/*不包括左/右边距*/
显示：块；
}

或者对容器使用

填充

，而不是对输入使用

边距

：

<div class="parent">
    <input id="test-input" type="text" />
</div>

---

嘿，我刚从你的回答中学到了一些东西，我不知道你可以使用calc。谢谢分享！谢谢@Hashem。我以前从未见过CSS calc。“Padding”也可以工作，但似乎有点奇怪，您必须删除“margin”以避免溢出。我认为框大小：border box应该注意这一点。您可能需要注意，

calc（）

是实验性的，不适用于所有浏览器。@j08691正是如此，我添加了一个指向MDN页面的链接以供进一步阅读。再次感谢Hashem和@j08691<代码>框大小：仅供参考，如果您需要与IE8-和Android 4.3-兼容的解决方案，那么您仍然需要Firefox的前缀（和WebKit的前缀程度较低），在父级上有较大的填充，在输入上有

宽度：100%