Eine Eingabe mit display:block ist kein Block, warum nicht?

Question

Eine Eingabe mit display:block ist kein Block, warum nicht?

Gefragt el 23 de Juni, 2009: Wann wurde die Frage gestellt
77465 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Warum ist display:block;width:auto; bei meiner Texteingabe nicht wie ein div verhalten und die Breite des Containers ausfüllen?

Ich hatte den Eindruck, dass ein div einfach ein Blockelement mit automatischer Breite ist. Sollten im folgenden Code das div und die Eingabe nicht die gleichen Abmessungen haben?

Wie bringe ich die Eingabe dazu, die Breite zu füllen? Eine Breite von 100 % wird nicht funktionieren, da die Eingabe eine Füllung und einen Rahmen hat (was eine endgültige Breite von 1 Pixel + 5 Pixel + 100 % + 5 Pixel + 1 Pixel ergibt). Feste Breiten sind keine Option, und ich bin auf der Suche nach etwas mehr flexibel.

Ich würde eine direkte Antwort einem Workaround vorziehen. Dies scheint eine CSS-Macke zu sein, deren Verständnis später nützlich sein kann.

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

Ich sollte darauf hinweisen, dass ich dies bereits mit Wrapper Workarounds tun kann. Abgesehen von dieser Schraube mit der Seite Semantik und CSS-Selektor Beziehungen, die ich versuche, die Art des Problems zu verstehen und ob es durch Ändern der Art der INPUT selbst überwunden werden kann.

Ok, das ist WIRKLICH seltsam! Ich habe herausgefunden, dass die Lösung einfach darin besteht, Folgendes hinzuzufügen max-width:100% an einen Eingang mit width:100%;padding:5px; . Dies wirft jedoch noch mehr Fragen auf (die ich in einer separaten Frage stellen werde), aber es scheint, dass width das normale CSS-Box-Modell verwendet und max-width das Internet Explorer border-box-Modell. Wie sehr seltsam.

Internet Explorer 8 und Safari 4 begrenzen die maximale Breite auf 100% + padding + border, was auch in der Spezifikation vorgesehen ist. Endlich hat der Internet Explorer etwas richtig gemacht.

Oh mein Gott, das ist fantastisch! Ich bin gerade dabei, damit zu spielen, und mit viel Hilfe von den ehrwürdigen Gurus Dekan Edwards y Erik Arvidsson Ich habe es geschafft, drei separate Lösungen zusammenzustellen, um eine echte Cross-Browser-Breite von 100 % bei Elementen mit beliebiger Auffüllung und Umrandung zu erreichen. Siehe Antwort unten. Diese Lösung erfordert kein zusätzliches HTML-Markup, sondern nur eine Klasse (oder einen Selektor) und ein optionales Verhalten für den alten Internet Explorer.

Gefragt el 23 de Juni, 2009 von SpliFF

Answer 1

5 Antworten

Answer 2

134voto

SpliFF Punkte 36890

Schauen Sie sich an, was ich mir ausgedacht habe, eine Lösung, die das relativ unbekannte box-sizing:border-box Stil aus CSS 3, der eine "echte" Breite von 100 % für jedes Element unabhängig von dessen Füllung und/oder Rändern ermöglicht.

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

Diese Lösung unterstützt Internet Explorer 6 und Internet Explorer 7 über ein Verhalten, das von Erik Arvidsson geschrieben wurde, mit einigen Anpassungen von Dean Edwards, um prozentuale und andere Nicht-Pixel-Breiten zu unterstützen.

Arbeitsbeispiel
Verhalten (boxsizing.htc)

Beantwortet el 23 de Juni, 2009 von SpliFF (36890 Punkte )

Answer 3

10voto

Jonathan Fingland Punkte 54655

Am besten ist es, die Eingabe in ein div mit Ihrem Rahmen, Rändern usw. einzuschließen und die Eingabe darin mit einer Breite von 100 % und ohne Rahmen, Ränder usw. zu haben.

Zum Beispiel,

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

Beantwortet el 23 de Juni, 2009 von Jonathan Fingland (54655 Punkte )

Answer 4

10voto

Tyler Punkte 21336

Der Grund dafür ist, dass die Größe einer Texteingabe durch ihr size-Attribut bestimmt wird. Fügen Sie size="50" innerhalb des <input>-Tags hinzu. Dann ändern Sie es in size="100" - sehen Sie, was ich meine?

Ich vermute, dass es eine bessere Lösung gibt, aber die einzige, die mir einfällt, ist etwas, das ich bei der Frage "Hidden features of HTML" auf SO gefunden habe: Verwenden Sie ein mit Inhalt bearbeitbares Div anstelle einer Eingabe. Die Übergabe der Benutzereingabe an das umschließende Formular (falls Sie das brauchen) könnte ein wenig schwierig sein.

Versteckte Merkmale von HTML

Beantwortet el 23 de Juni, 2009 von Tyler (21336 Punkte )

Answer 5

2voto

John Porter Punkte 33

Fügen Sie dies zu Ihrem Stil hinzu:

box-sizing: border-box;

Beantwortet el 3 de November, 2019 von John Porter (33 Punkte )

Answer 6

1voto

Jacob Punkte 75084

Du könntest es vortäuschen, etwa so:

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

Beantwortet el 23 de Juni, 2009 von Jacob (75084 Punkte )

Eine Eingabe mit display:block ist kein Block, warum nicht?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Eine Eingabe mit display:block ist kein Block, warum nicht?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: