使用display：block输入的不是块，为什么不呢？

153

为什么display:block;width:auto;我的文本输入不像div那样填充容器宽度？

我的印象是div只是具有自动宽度的块元素。在以下代码中，div和输入的尺寸不应该相同吗？

如何获取输入以填充宽度？100％的宽度无效，因为输入具有填充和边框（导致最终宽度为1像素+ 5像素+ 100％+ 5像素+ 1像素）。固定宽度不是一个选择，我正在寻找更灵活的方法。

我希望直接找到解决方法。这似乎是CSS的怪癖，以后理解它可能会很有用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, input {
            border: 1px solid red;
            height: 5px;
            padding: 5px;
        }
        input, form {
            display: block;
            width: auto;
        }
        </style>
    </head>

    <body>
        <div></div>
        <form>
            <input type="text" name="foo" />
        </form>
    </body>
</html>

我应该指出，我已经可以使用包装方法来做到这一点。除了页面语义和CSS选择器关系的这种混乱之外，我还试图了解问题的性质以及是否可以通过更改INPUT本身的性质来解决。

好的，这真是奇怪！我发现解决方案是简单地使用添加max-width:100%到输入中width:100%;padding:5px;。但是，这引发了更多的问题（我将在另一个问题中回答），但是宽度似乎使用普通的CSS盒子模型，而max-width使用Internet Explorer边框模型。真奇怪

好的，最后一个似乎是Firefox 3中的错误。InternetExplorer 8和Safari 4将最大宽度限制为100％+填充+边框，这是规范所说的。终于，Internet Explorer正确了。

天哪，这太棒了！在此过程中，在著名的大师Dean Edwards和Erik Arvidsson的大力帮助下，我设法组合了三个单独的解决方案，以在具有任意填充和边框的元素上实现真正的跨浏览器100％的宽度。请参阅下面的答案。此解决方案不需要任何额外的HTML标记，只需一个类（或选择器）和旧版Internet Explorer的可选行为即可。

html  css 
— SpliFF
source
— ChristopheEblé，2009年
7
@SleepyCod不是完全重复的。这个问题解决了input元素显然不符合CSS 2.1规范的问题，而您链接到的问题则询问如何防止溢出框（顺便说一句）完全在CSS 2.1规范范围内发生。问题及其解决方案都是重叠的，但称它们为完全重复完全是错误的。
— 13年

Answers:

130

看看我想出了什么，一种使用box-sizing:border-boxCSS 3中相对未知的样式的解决方案。这允许任何元素上的“真”宽度为100％，无论该元素的填充和/或边框如何。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

该解决方案通过Erik Arvidsson编写的行为支持Internet Explorer 6和Internet Explorer 7，并通过Dean Edwards的一些调整来支持百分比和其他非像素宽度。

工作示例
行为（boxsizing.htc）

— SpliFF
source
这看起来是一个了不起的解决方案，但是在IE8中不起作用（div和field框不够宽）。您知道此方法是否有任何更新吗？谢谢！
— 火箭猴2011年
2
Schepp的此polyfill更新了IE6 / 7 polyfill以处理更多边缘情况，并在github上与IE8一起使用：github.com/Schepp/box-sizing-polyfill
— nicjohnson 2012年
谢谢！当我将它们都设置为300px宽时，我无法弄清为什么<input type = text>和<input type = submit>的宽度不同。这样解决了！请注意，两年后，对于最新版本的Firefox，您仍然需要使用-moz-前缀。caniuse.com/#feat=css3-boxsizing
— Darren Cook
4
不幸的是，如果您还需要添加页边距，则不能使用这种方法来消除wrapper div（因为如果使用宽度，则页边距对任何元素均不起作用：100％）
— SystemParadox 2012年
6
但这并不能解决问题。是的，它的工作原理，如果你使用width:100%，但它没有，如果你使用width:auto，在这里看到：jsfiddle.net/hGuzE
— 尼姆罗德
8

发生这种情况的原因是文本输入的大小由其大小属性决定。在<input>标记内添加size =“ 50”。然后将其更改为size =“ 100”-明白我的意思吗？

我怀疑有更好的解决方案，但是唯一想到的是我在SO上的“ HTML的隐藏功能”问题中发现的一些问题：使用内容可编辑的div，而不是输入。将用户输入传递到封闭表单（如果您需要这样做）可能会有些棘手。

HTML的隐藏功能

— 矩阵青蛙
source
8
我很好奇CSS人士如何证明这一点。如果width可以用像素/百分比显式地覆盖大小，那么我不明白为什么当元素是一个块时它应该继续使用它。
— SpliFF
1
但是，同样的情况也发生在button没有size属性的地方？
— zanona 2013年
1
一个问题更多地集中在“为什么是这样的标准”部分，例如答案：stackoverflow.com/questions/4567988/…那里的最高要求是，这是因为它input是一个被替换的元素。
— Ciro Santilli郝海东冠状病六四事件法轮功
7

最好的选择是将输入内容包装在带有边框，边距等的div中，并使输入内容的内部具有100％的宽度，并且没有边框，没有边距等。

例如，

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
            div {
                border: 1px solid red;
                padding: 5px;
            }
            input, form {
                display: block;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <form>
            <div><input type="text" name="foo" /></div>
        </form>
    </body>
</html>
— 乔纳森·芬兰
source
1
是的，它会起作用，但这更多的是解决方法，而不是答案。我试图确定为什么输入似乎忽略了块行为。
— SpliFF
2
乔纳森（Jonathan），请原谅我明显的无礼，但我来这里是为了寻找正确的答案（tm），还高兴地阅读了@SpliFF特别提到他更喜欢“解决方法的直接答案”的部分，但您仍然添加了多余的内容（例如，在SO以及Internet上的其他地方多次重复）答案，似乎无视问题的约定。请问您- 为什么？提前谢谢您
— 好奇地
1

您可以伪造它，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>
— 雅各布
source
1
我过去做过伪造的方法，但老实说，我已经厌倦了。我最终遇到了各种弱智的骇客，例如使用99％的宽度来获取输入并选择匹配。我真的很想像div一样对待输入，我希望自己只是忽略了一些东西。
— SpliFF
2
您的输入也会溢出inputWrapper，因为它仍然具有width：100％并带有内部填充。
— SpliFF
1

试试这个：

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
— 麦克风
source
1
您省去了输入填充和边框。我要说的是你错了，直到我意识到你在做什么。现在，我得到了merkuro想要做的事情（他的代码仍然是错误的，但是概念已经存在了）。padding-right将100％的含义更改为12px（边框加上输入的填充）。这种方法的缺点是，所有其他形式的子元素也会受到填充的影响，因此也需要进行补偿。
— SpliFF
1

您也可以伪造它，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>

            .container {
                width:90%;
            }

            .container div{
                border: 1px solid red;
                padding: 5px;
                font-size:12px;
                width:100%;
            }

            input{
                  width:100%;
                border: 1px solid red;
                font-size:12px;
                padding: 5px;
            }

            form {

                margin:0px;
                padding:0px;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div>
                asdasd
            </div>
            <form action="">
                <input type="text" name="foo" />
            </form>
        </div>
    </body>
</html>
— 亚历克斯
source
1
与上述相同的问题，您在100％的宽度上具有内部填充。那会溢出。
— SpliFF
您可以使用JavaScript做到这一点
— AlexC
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.