为什么 100% 的输入宽度总是超出包含的 div？答案

【问题标题】：Why does an Input width of 100% always overrun the containing div?为什么 100% 的输入宽度总是超出包含的 div？
【发布时间】：2011-10-17 00:19:37
【问题描述】：

请注意小提琴：http://jsfiddle.net/cBWaG/4/

我有一个带填充物的容器。我想要的是输入（文本）是填充内的 100% 宽度。目前虽然它超出了填充。关于如何在不必使用固定宽度的情况下防止输入超出容器/填充的建议？

谢谢

【问题讨论】：

填充是当然的问题，我很想知道如何自己做。
Can I stop 100% Width Text Boxes from extending beyond their containers?的可能重复
这里解决了。奇迹般有效！ stackoverflow.com/a/16907625

标签： html css

【解决方案1】：

试试这个

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

Demo

【讨论】：

【解决方案2】：

表单输入真的很难设置样式。并且特别难以使样式在所有浏览器中看起来一致。我发现设置文本输入样式的最佳方法之一是去掉边框、轮廓、填充和边距。然后用你想要的边框、轮廓、内边距和边距将输入包装在一个 div 中。

我想我实现了你想要的。看看这个分叉的 jsFiddle：http://jsfiddle.net/aP2Ju/

【讨论】：

【解决方案3】：

标准盒子模型中元素的width属性不包括内边距、边距或边框；它是元素内容的宽度，而不是盒子本身的宽度。盒子比宽度大了填充的大小。然后添加边框，最后添加边距。

旧版本的 IE（v4 和 5）使用现在称为“Quirks 模式”的非标准框模型。这个盒子模型将填充和边框放置在测量区域内，因此盒子的width 属性包括它们。这个模型确实让拥有 100% 宽度的盒子变得更容易。

两种盒子模型各有长处，但 IE 在实现盒子模型时违反了标准，这也是开发人员难以更新为 IE 设计的旧网站以使其仅适用于其他浏览器的原因之一.

最近，添加了一个 CSS 属性，允许设计人员选择他们希望将哪些盒子模型用于页面上的任何给定元素。该属性名为box-sizing，当前使用的大多数浏览器都支持该属性；唯一不支持它的主要是 IE6 和 IE7（其他需要供应商前缀但确实支持它）。有关该功能的浏览器支持表，请参见此处：http://caniuse.com/#search=box-sizing

另一个选项是根本不设置宽度。默认情况下，<div> 元素设置为填充可用宽度，这基本上意味着 100%，但无论填充和边距设置为什么，这基本上都是您所追求的。如果您已覆盖宽度并希望将其设置回此设置，请使用width:auto;。

希望对您有所帮助。

【讨论】：

【解决方案4】：

在容器 div 内创建一个没有指定宽度或填充的新 div。它将自动占据填充内的全宽。然后，您可以为输入设置 100% 的宽度，使其完全填充内部 div。

【讨论】：

你是对的。我的回答是错误的。问题不在于 div 上的填充，而在于输入本身的边框和填充。如果你删除它，你很好 (jsfiddle.net/ZCyBx) 但这不是你想要的。我认为您也需要将额外的填充复制到父级。如果你给 div 一个 35px 而不是 15px 的右填充，你可以补偿输入的 10px 和填充：jsfiddle.net/em3sW
或者只给输入/表单提供 -{padding} 的边距？

【解决方案5】：

请注意：造成这种情况的原因是盒子模型的性质。 <input> 的宽度实际上是 100%+padding。

【讨论】：

【解决方案6】：

width: 100%;

是由其父元素定义的元素总可用宽度，包括填充。

width: auto;

将扩展您的元素以填充剩余空间。

【讨论】：

是的..问题是，当您将具有 style="width:100%" 的文本框（或 html5 输入元素）放入 div 时，您刚才描述的内容似乎不起作用.. :)

【解决方案7】：

是的，很难处理输入元素的大小。 Box-sizing 并没有太大的区别，它仍然超出了边界。同意使用 div 是一个好方法。这是我在 IE 11 (11.0.18) 上测试的结果。

现在让我们使用 div。关键是将输入元素的边距和内边距设置为 0px 和 width:100%。这使得输入元素填充父容器“div”元素。

    <fieldset id="inputs">
        <div id="username_div">
            <input id="username" type="text" placeholder="username" required autofocus />
        </div>
        <div id="password_div">
            <input id="password" type="password" placeholder="password" />
        </div>
    </fieldset>


    #inputs div {
        border: 1px solid red;
        margin: 5px 10px 5px 10px;
        padding: 10px 10px 10px 30px;
        border: 1px solid #CCC;
        border-radius: 5px;
    }

    #inputs input {
        margin:0px;
        padding:0px;
        width:100%;
    }

【讨论】：