Geben Sie type=text ein, um den übergeordneten Container zu füllen

Lesezeit: 5 Minuten

Benutzer-Avatar
Konrad Rudolf

Ich versuche, ein zu lassen <input type="text"> (im Folgenden als „Textfeld“ bezeichnet) füllt einen übergeordneten Container, indem er seine Einstellungen vornimmt width zu 100%. Dies funktioniert, bis ich dem Textfeld eine Auffüllung gebe. Diese wird dann zur Inhaltsbreite addiert und das Eingabefeld läuft über. Beachten Sie, dass dies in Firefox nur geschieht, wenn der Inhalt standardkonform wiedergegeben wird. Im Quirks-Modus scheint ein anderes Box-Modell zu gelten.

Hier ist ein minimaler Code, um das Verhalten in allen modernen Browsern zu reproduzieren.

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}
<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

Meine Frage: Wie bekomme ich das Textfeld in den Container?

Notiz: für die <div id="y">das ist einfach: einfach einstellen width: auto. Wenn ich dies jedoch für das Textfeld versuche, ist der Effekt anders und das Textfeld nimmt seine Standardzeilenanzahl als Breite an (auch wenn ich display: block für das Textfeld).

EDIT: Davids Lösung würde natürlich funktionieren. Allerdings möchte ich das HTML nicht verändern – insbesondere möchte ich keine Dummy-Elemente ohne semantische Funktionalität hinzufügen. Dies ist ein typischer Fall von divitis die ich um jeden Preis vermeiden möchte. Dies kann nur ein letzter Ausweg sein.

Benutzer-Avatar
studioromeo

Mit CSS3 können Sie die Box-Sizing-Eigenschaft für Ihre Eingaben verwenden, um deren Box-Modelle zu standardisieren. So etwas würde es Ihnen ermöglichen, Polsterung hinzuzufügen und 100% Breite zu haben:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

Leider funktioniert dies nicht für IE6/7, aber der Rest ist in Ordnung (Kompatibilitätsliste), also wenn Sie diese Browser unterstützen müssen, wäre Ihre beste Wahl Davids Lösung.

Wenn Sie mehr lesen möchten, schauen Sie vorbei diesen brillanten Artikel von Chris Coyier.

Hoffe das hilft!

Sie können das Textfeld mit einem umgeben <div> und gib das <div> padding: 0 20px. Ihr Problem ist, dass die Breite von 100 % keine Füll- oder Randwerte enthält. diese Werte werden auf die 100%-Breite addiert, also der Überlauf.

Benutzer-Avatar
Ben

Wegen der Art und Weise, wie die Box-Modell definiert und implementiert ist Ich glaube nicht, dass es eine reine CSS-Lösung für dieses Problem gibt. (Abgesehen von dem, was Matthew beschrieben hat: Verwenden Sie auch Prozent für die Polsterung, z. B. Breite: 94%; Polsterung: 0,3%;)

Man könnte aber Javascript-Code einbauen, um die Breite beim Laden der Seite dynamisch zu berechnen… hm, und dieser Wert müsste natürlich auch bei jeder Größenänderung des Browserfensters aktualisiert werden.

Interessantes Nebenprodukt einiger Tests, die ich durchgeführt habe: Firefox tut setzt die Breite eines Eingabefeldes auf 100% wenn zusätzlich zu width: 100%; Sie setzen auch max-width auf 100%. Dies funktioniert jedoch nicht in Opera 9.5 oder IE 7 (ältere Versionen nicht getestet).

Wie bekomme ich das Textfeld 2019 in den Container?

Verwenden Sie einfach display: flex;

#x {
  background: salmon;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}
<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

Mit reinem CSS ist dies leider nicht möglich; HTML- oder Javascript-Modifikationen sind für jedes nicht triviale flexible, aber eingeschränkte UI-Verhalten erforderlich. CSS3-Spalten werden in dieser Hinsicht etwas helfen, aber nicht in Szenarien wie Ihrem.

Davids Lösung ist die sauberste. Es ist nicht wirklich ein Fall von Divitis – Sie fügen nicht unnötigerweise eine Reihe von Divs hinzu oder geben ihnen Klassennamen wie “p” und “h1”. Es erfüllt einen bestimmten Zweck, und das Schöne in diesem Fall ist, dass es auch eine erweiterbare Lösung ist — Sie können dann beispielsweise jederzeit abgerundete Ecken hinzufügen, ohne etwas hinzuzufügen. Die Barrierefreiheit ist ebenfalls nicht betroffen, da es sich um leere Divs handelt.

Fwiw, hier ist, wie ich alle meine Textfelder implementiere:

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

Sie können dann CSS verwenden, um abgerundete Ecken hinzuzufügen, Padding wie in Ihrem Fall hinzuzufügen usw., aber Sie müssen es auch nicht – Sie können diese seitlichen Divs vollständig ausblenden und haben nur ein normales Eingabe-Textfeld .

Andere Lösungen sind die Verwendung von Tabellen, z. B. verwendet Amazon Tabellen, um ein flexibles, aber eingeschränktes Layout zu erhalten, oder die Verwendung von Javascript, um die Größen zu optimieren und sie bei Änderungen der Fenstergröße zu aktualisieren, z. B. Google Docs, Maps usw. tun dies.

Wie auch immer, meine zwei Cent: Lassen Sie in solchen Fällen nicht zu, dass Idealismus der Praktikabilität im Wege steht. 🙂 Davids Lösung funktioniert und bringt HTML kaum durcheinander (und tatsächlich ist die Verwendung von semantischen Klassennamen wie “before” und “after” imo immer noch sehr sauber).

Benutzer-Avatar
Matthew M. Osborn

Dieses Verhalten wird durch die unterschiedlichen Interpretationen des Box-Modells verursacht. Das korrekte Box-Modell besagt, dass die Breite nur für den Inhalt gilt und Padding und Margin dazu kommen. Sie erhalten also 100 % plus 20 Pixel rechts und links, was 100 % + 40 Pixel als Gesamtbreite entspricht. Das ursprüngliche IE-Box-Modell, auch bekannt als Quirks-Modus, enthält Polsterung und Rand in der Breite. Die Breite Ihres Inhalts wäre also in diesem Fall 100 % – 40 Pixel. Aus diesem Grund sehen Sie zwei unterschiedliche Verhaltensweisen. Soweit ich weiß, gibt es dafür keine Lösung, es gibt jedoch eine Problemumgehung, indem die Breite auf 98% und die Polsterung auf jeder Seite auf 1% eingestellt wird.

Benutzer-Avatar
js1568

@Domenic das geht nicht. width auto bewirkt nichts weiter als das Standardverhalten dieses Elements, da der Anfangswert von width auto ist (siehe Seite 164, Cascading Style Sheets Level 2 Revision 1 Specification). Das Zuweisen einer Anzeige vom Typ Block funktioniert auch nicht, dies weist den Browser einfach an, eine Blockbox zu verwenden, wenn das Element angezeigt wird, und weist kein Standardverhalten zu, das so viel Platz wie möglich einnimmt, wie es ein div tut (siehe Seite 121, Cascading Style Blätter Level 2 Revision 1 Spezifikation). Dieses Verhalten wird vom visuellen Benutzeragenten gehandhabt, nicht von der CSS- oder HTML-Definition.

1157930cookie-checkGeben Sie type=text ein, um den übergeordneten Container zu füllen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy