Breite: Auto für Felder

Newbie CSS Frage. Ich dachte width:auto für ein display:block Element bedeutete "verfügbaren Platz zu füllen". Für ein <input> Element scheint dies jedoch nicht der Fall zu sein. Zum Beispiel:Breite: Auto für Felder

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

Zwei Fragen dann:

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

Vielen Dank!

Quelle

2011-01-07 richb

mögliche duplikate von [eingabe mit display: block ist kein block, warum nicht?] (Http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why- nicht) – Phrogz

@Phrogz Ja, es ist ein Duplikat. Ich suchte, fand es aber nicht. Danke. – richb

Eine <input> Breite wird von seinem size Attribut erzeugt. Der Standard size ist, was die automatische Breite antreibt.

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

nicht füllt Breite:

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

Fills Breite:

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

Kleinere Größe, geringere Breite:

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

UPDATE

Hier ist das Beste, was ich nach ein paar Minuten tun konnte. Es ist 1px in FF, Chrome und Safari und perfekt in IE. (Das Problem ist, #^& * IE gilt Grenzen anders als alle anderen, damit es nicht konsistent ist.)

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

Quelle

2011-01-07 02:54:14 Ben

+20

Danke. Breite: 100% ist nicht das Gleiche tho. Wenn es Ränder oder einen Rand gibt, wird das Elternfeld überlaufen. – richb

Sie könnten diese explizit einstellen, wie Sie möchten, z. 'Grenze: 2px Einfügung #eee; Rand: -2px'. Ich habe es selbst nicht getestet, aber etwas in dieser Richtung. – Ben

Danke Steve. Sie sollten auch http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not, die einige andere interessante Ideen hat. – richb

Wie in der anderen Antwort erwähnt, width: auto nicht aufgrund der Breite durch die erzeugt wird, funktioniert Das Größenattribut der Eingabe kann nicht auf "Auto" oder Ähnliches eingestellt werden.

Es gibt ein paar Workarounds, die Sie verwenden können, damit es gut mit dem Boxmodell spielt, aber nichts, soweit ich weiß.

Zuerst kann man die Polsterung im Bereich gesetzt Prozentsatz, um sicherzustellen, dass die Breite auf 100% addiert, zB:

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

Eine andere Sache, die Sie könnten versuchen, die absolute Positionierung verwendet, mit links und rechts auf 0 gesetzt Mit dieser Auszeichnung:

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

Und diese CSS:

fieldset { 
    position: relative; 
} 

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

Diese absolute Positionierung bewirkt, dass die Eingabe das übergeordnete Feld horizontal füllt, unabhängig von der Füllung oder dem Rand der Eingabe.Ein großer Nachteil dabei ist, dass Sie sich jetzt mit der Höhe des Feldsets beschäftigen müssen, das 0 ist, wenn Sie es nicht einstellen. Wenn Ihre Eingaben alle die gleiche Höhe haben, wird dies für Sie funktionieren. Legen Sie einfach die Höhe des Feldsets auf die Höhe der Eingabe fest.

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

Quelle

2012-05-17 15:11:08

'links: 0; rechts: 0; 'bewirkt keine Eingabefelder. http: // jsbin.com/umirek/1/bearbeiten – vsync

ja es tut, versuche es zu etwas anderes in Ihrem jsbin –

nein, funktioniert nicht für mich ... sorry (Firefox 18) – vsync

Die einzige Option, die ich mir vorstellen kann, ist . Wenn Sie das Eingabefeld ebenfalls mit einem Padding ausstatten möchten, anstatt nur einen Container label um ihn herum zu platzieren, verschieben Sie stattdessen die Formatierung auf dieses Label, und geben Sie außerdem das Padding für das Label an. Eingabefelder sind starr.

Quelle

2013-08-07 13:34:32

"Gibt es eine Definition von genau welcher Breite: Auto bedeutet? Die CSS Spezifikation scheint mir vage, aber vielleicht habe ich den relevanten Abschnitt verpasst."

Niemand antwortete tatsächlich auf den obigen Teil der Frage des ursprünglichen Posters.

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

Solange der Wert der Breite Auto ist, kann das Element horizontal Rand, Polsterung und Rahmen haben, ohne sich breiter als sein Behälter ...

Wenn Sie andererseits width: 100% angeben, ist die Breite des Elements insgesamt 100% seines enthaltenen Blocks zuzüglich eines horizontalen Rands, Padding und Rahmen ... Dies ist möglicherweise das, was Sie wollen, aber höchstwahrscheinlich isn t.

den Unterschied sichtbar zu machen ich ein Beispiel aus: http://www.456bereastreet.com/lab/width-auto/

Quelle

2013-10-27 01:08:35 response

nette Antwort/Link, schlage ich vor, eine dritte zu setzen Beispiel mit "Box-sizing: border-box" ... – halfbit

Es kann nicht genau, was Sie wollen, aber meine Abhilfe ist die AUTOBREITE Styling Wrapper div anwenden - dann Ihre Eingabe auf 100 gesetzt %.

Quelle

2014-03-09 00:09:20 mwilcox

Antwort 1 - "Antwort" gab eine nette Antwort/Link dafür. Um es kurz zu fassen: "auto" ist die Standardeinstellung. Es ist also so, als ob Änderungen an der Breite eines Elements entfernt werden.

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

Quelle

2015-11-05 14:31:16

Breite: Auto für Felder

Antwort

Verwandte Themen