width: auto für <input> -Felder

122

Newbie CSS Frage. Ich dachte width:autofür ein display:blockElement, das "verfügbaren Platz füllen" bedeutet. Für ein <input>Element scheint dies jedoch nicht der Fall zu sein. Beispielsweise:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Dann zwei Fragen:

Gibt es eine Definition genau der Breite: Auto bedeutet? Die CSS-Spezifikation erscheint mir vage, aber vielleicht habe ich den entsprechenden Abschnitt verpasst.
Gibt es eine Möglichkeit, mein erwartetes Verhalten für ein Eingabefeld zu erreichen - dh. verfügbaren Platz füllen wie andere Elemente auf Blockebene?

Vielen Dank!

css richb
quelle

Mögliches Duplikat der Eingabe mit Anzeige: Block ist kein Block, warum nicht?

Phrogz

@Phrogz Ja, es ist ein Duplikat. Ich habe gesucht, aber nicht gefunden. Vielen Dank.

Richb

88

Ein <input>‚s Breite wird von seinem erzeugten sizeAttribute. Die Standardeinstellung sizeist die Steuerung der automatischen Breite.

Sie können es width:100%wie in meinem Beispiel unten dargestellt versuchen .

Füllt die Breite nicht aus:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Füllt die Breite:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Kleinere Größe, kleinere Breite:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

AKTUALISIEREN

Hier ist das Beste, was ich nach ein paar Minuten tun kann. In FF, Chrome und Safari ist es 1 Pixel niedriger und im IE perfekt. (Das Problem ist, dass # ^ & * IE Ränder anders anwendet als alle anderen, daher ist es nicht konsistent.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

Ben
quelle

24

Vielen Dank. Breite: 100% ist nicht dasselbe. Es wird das übergeordnete Feld überlaufen, wenn Ränder oder ein Rand vorhanden sind.

Richb

1

Sie können diese explizit einstellen, um anzupassen, wie Sie möchten, z border:2px inset #eee; margin:-2px. Ich habe es zwar nicht selbst getestet, aber etwas in dieser Richtung.

Ben

3

Danke Steve. Sie sollten auch stackoverflow.com/questions/1030793/… besuchen, das einige andere interessante Ideen enthält.

Richb

1

Epische Lösung für konsistente Breiten über CSS auf Eingabefeldern, +1

Stephen Sprinkle

11

Sie können die Eigenschaft für die Größe des Eingabefelds auf "Rahmen" setzen, um zu verhindern, dass der Rand den Container überlappt.

Nicholas

26

"Gibt es eine Definition genau der Breite: Auto bedeutet? Die CSS-Spezifikation erscheint mir vage, aber vielleicht habe ich den entsprechenden Abschnitt verpasst."

Niemand hat den obigen Teil der Frage des Originalplakats tatsächlich beantwortet.

Hier ist die Antwort: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Solange der Wert für width automatisch ist, kann das Element einen horizontalen Rand, eine Auffüllung und einen Rand haben, ohne breiter als sein Container zu werden ...

Wenn Sie dagegen width: 100% angeben, beträgt die Gesamtbreite des Elements 100% des enthaltenen Blocks zuzüglich horizontaler Ränder, Auffüllungen und Rahmen ... Dies ist möglicherweise das, was Sie möchten, aber höchstwahrscheinlich nicht .

Um den Unterschied zu veranschaulichen, habe ich ein Beispiel gemacht: http://www.456bereastreet.com/lab/width-auto/

Antwort
quelle

4

nette Antwort / Link, ich schlage vor, ein drittes Beispiel mit "Box-Sizeing: Border-Box" zu setzen ...

Halfbit

Das ist nicht für eine Eingabe und da Auto die Standardeinstellung ist, sehe ich nicht, wie nützlich es ist

Barbz_YHOOL

9

Wie in der anderen Antwort angegeben, funktioniert width: auto nicht, da die Breite durch das Größenattribut der Eingabe generiert wird, das nicht auf "auto" oder ähnliches eingestellt werden kann.

Es gibt ein paar Problemumgehungen, die Sie verwenden können, damit es gut mit dem Box-Modell funktioniert, aber meines Wissens nichts Fantastisches.

Zuerst können Sie die Auffüllung im Feld mithilfe von Prozentsätzen festlegen und sicherstellen, dass sich die Breite zu 100% addiert, z.

input {
  width: 98%;
  padding: 1%;
}

Sie können auch versuchen, die absolute Positionierung zu verwenden, wobei links und rechts auf 0 gesetzt sind. Verwenden dieses Markups:

<fieldset>
    <input type="text" />
</fieldset>

Und dieses CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Diese absolute Positionierung bewirkt, dass die Eingabe das übergeordnete Feldset horizontal ausfüllt, unabhängig von der Auffüllung oder dem Rand der Eingabe. Ein großer Nachteil davon ist jedoch, dass Sie sich jetzt mit der Höhe des Feldsatzes befassen müssen, die 0 ist, sofern Sie sie nicht einstellen. Wenn Ihre Eingaben alle dieselbe Höhe haben, funktioniert dies für Sie. Stellen Sie einfach die Höhe des Feldsatzes auf die Höhe der Eingabe ein.

Abgesehen davon gibt es einige JS-Lösungen, aber ich mag es nicht, grundlegendes Styling mit JS anzuwenden.

Jon Raasch
quelle

8

Da input's widthdurch sein sizeAttribut gesteuert wird, initialisiere ich ein input widthnach seinem Inhalt folgendermaßen:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

Fabricio
quelle

1

Obwohl diese #angularspezifische Antwort keine gültige Antwort auf die Frage des OP ist (und ich nicht abstimme), bin ich zu diesem Thema gekommen, nur um diese spezielle Idee zu finden.

Nobug

5

Es ist vielleicht nicht genau das, was Sie wollen, aber meine Problemumgehung besteht darin, das Autowidth-Styling auf ein Wrapper-Div anzuwenden und dann Ihre Eingabe auf 100% zu setzen.

mwilcox
quelle

0

Die einzige Option, die ich mir vorstellen kann, ist die Verwendung width:100%. Wenn Sie das Eingabefeld auch auffüllen möchten, labelanstatt nur einen Container darum zu platzieren, verschieben Sie stattdessen die Formatierung auf diese Beschriftung, und geben Sie die Auffüllung der Beschriftung an. Eingabefelder sind starr.

Lajos Meszaros
quelle

0

Antwort 1 - "Antwort" gab eine nette Antwort / einen Link dafür. Kurz gesagt, "auto" ist die Standardeinstellung. Es ist also so, als würde man alle Änderungen in der Breite eines Elements entfernen

Antwort 2 - width: 100%stattdessen verwenden. Es füllt die 100% des übergeordneten Containers, in diesem Fall das "Formular".

Akhil Gupta
quelle

-4

Absolut erstaunliche Links, die eine absolut erstaunliche Funktion beschreiben:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Das Wesentliche:

Legen Sie Elemente in einen Behälter mit display: flex;.
Stellen Sie flex-grow: 1;auf jedes der enthaltenen Elemente ein.
Wenn Sie Elemente in diesen enthaltenen Elementen haben, die ebenfalls wachsen müssen, wiederholen Sie die Schritte 1 und 2 für die enthaltenen Elemente und ihre (enthaltenen) untergeordneten Elemente.
An unterschiedliche Bedürfnisse anpassen und anpassen (siehe Links).

Bearbeiten - Beispiel :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

Andrew
quelle

Wie hilft das bei einer automatischen Breite für Eingaben?

Kernel

@kernel Einfach. Siehe Beispiel.

Andrew

Die Breite der Eingabe beträgt immer 100% und nicht das minimal mögliche.

Kernel

2

Die Eingabe hat immer noch nicht die gleiche Breite wie der Inhalt, was die Frage war.

Kernel

Wenn Sie die akzeptierte - und auch die aller anderen - Antwort lesen, geschieht etwas anderes. Die Frage wäre dann "Was machst du richtig, dass alle falsch machen?".

Kernel

width: auto für <input> -Felder

Antworten: