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

Posted 2023-03-06

【中文标题】如何使输入文本字段采用所有可用宽度？

【英文标题】：How do I make the input text field take all available width?

【发布时间】：2014-03-23 06:45:07

【问题描述】：

我正在尝试将输入文本字段拉伸到可用宽度（减去边距）。这不起作用。为什么？

  <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>

【问题讨论】：

box-sizing：仅供参考，您仍然需要 Firefox 的前缀（以及较小程度的 WebKit）caniuse.com

如果您需要兼容 IE8- 和 android 4.3- 的解决方案，请在 parent 和 width: 100% 上设置更大的填充

【参考方案1】：

您可以使用 CSS3 calc() 函数来计算不包括左右边距的width，如下所示：

#test-input 
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px); /* Exclude left/right margins */
    display: block;

WORKING DEMO

或者使用padding作为容器而不是使用margin作为输入：

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

.parent 
    padding: 5px 15px;


#test-input 
    width: 100%;
    display: block;

WORKING DEMO

【讨论】：

嘿，我刚刚从您的回答中学到了一些东西，我不知道您可以使用 calc。感谢分享！

谢谢@Hashem。我以前从未见过 CSS calc。 “填充”也有效，但您必须删除“边距”以避免溢出似乎有点奇怪。我认为 box-sizing:border-box 应该解决这个问题。

您可能需要注意calc() 是实验性的，并不适用于所有浏览器。

@j08691 没错，我添加了指向 MDN 页面的链接以供进一步阅读。

再次感谢 Hashem 和 @j08691！