Inputfield mit der Breite 100% "erreicht" in die Polsterung

StackOverflow https://stackoverflow.com/questions/5488498

  •  14-11-2019
  •  | 
  •  

Frage

Ich habe eine Tischteät mit einem Inputfield darin. Das Eingabefeld sollte die Tischtecke füllen, aber nicht in seine Polsterung erreichen. Was ich habe so ausgesehen (mit Firebug):

Formularelement, das in Polsterung erreicht wird

Ich möchte, dass das Inputfield in der blauen Fläche aufbewahrt wird und nicht in den lila eins rät.

Und: Natürlich gelesene ich hier alle Fragen zu diesem Thema. Ich habe alles gelesen und konnte keine Antwort finden, die das tatsächlich gelöst hat.

es sollte in allen modernen Browsern (IE7 auch) arbeiten;

Ich habe ein minimales lives Beispiel mit jsfiddle, wo ich alle Lösungen in den anderen Fragen ausprobiert habe Aber ich konnte das einfach nicht dazu bringen, zu arbeiten. a) Gibt es eine funktionierende Lösung dafür? und b) Gibt es sogar eine schöne und nicht-arktaroundische Lösung dafür?

Warum ist das ein Problem in allen Browsern? Ich denke, das ist eine falsche Spezifikation in CSS. Denn wenn ich "100%" sage, möchte ich das Element "100%" des Inhaltsbereichs passen. Was ist der Anwendungsfall, um es in Paddings und Margen fließen zu lassen?

War es hilfreich?

Lösung

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

Andere Tipps

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

input { width: 100%; padding: 0; }

Or

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

I think you should try to use

box-sizing: border-box
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top