带显示输入：块不是块，为什么不呢？-Java 学习之路

147

为什么 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中的一个错误.Internet Explorer 8和Safari 4将最大宽度限制为100％填充边界，这是规范所要做的 . 最后，Internet Explorer做对了 .

天啊，这真棒！在玩这个游戏的过程中，并且在古老的大师Dean Edwards和Erik Arvidsson的帮助下，我设法拼凑了三个独立的解决方案，在具有任意填充和边框的元素上制作真正的跨浏览器100％宽度 . 见下面的答案 . 此解决方案不需要任何额外的HTML标记，只需要一个类（或选择器）和旧版Internet Explorer的可选行为 .

6 回答

试试这个：

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }

回复于 2024-05-06T06:24:38+08:00

1

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

我怀疑有一个更好的解决方案，但我想到的唯一一个问题是我在SO的“隐藏的HTML功能”问题上找到的东西：使用内容可编辑的div而不是输入 . 将用户输入传递给封闭的表单（如果这是你需要的）可能有点棘手 .

Hidden features of HTML

回复于 2024-05-06T06:24:38+08:00

127

你也可以假装它，像这样：

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

回复于 2024-05-06T06:24:38+08:00

看看我想出了什么，使用来自CSS 3的相对未知的 box-sizing:border-box 样式的解决方案 . 这允许任何元素上的'true'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进行了一些调整，以支持百分比和其他非像素宽度 .

Working example
Behaviour (boxsizing.htc)

回复于 2024-05-06T06:24:38+08:00

你最好的选择是将输入包装在带有边框，边距等的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>

回复于 2024-05-06T06:24:38+08:00

你可以假装它，像这样：

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

回复于 2024-05-06T06:24:38+08:00

带显示输入：块不是块，为什么不呢？

6 回答

相关问题