Question

我有一个带衬垫的容器。我想要的是输入（文本）从填充内100％宽度。目前虽然它超过了填充。关于如何防止输入超过容器/衬垫而不必使用固定宽度的建议？

由于

Answer 1

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

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

Answer 2

试试这个

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

Demo

Answer 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;。

希望有所帮助。

Answer 4

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

Answer 5

请注意：原因是盒子模型的本质。 <input>的宽度实际上是100％+填充。

Answer 6

width: 100%;

元素TOTAL是否可用宽度，包括填充，由其父级定义。

width: auto;

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

Answer 7

是的，很难处理输入元素的大小。盒子大小没有太大的区别，它仍然超越边界。同意使用div是一种很好的方法。这是我在IE 11（11.0.18）上测试的内容。

让我们现在使用div。关键是将输入元素的边距和填充设置为0px和宽度：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%;
    }

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

7 个答案: