Texteingabe mit 100% Breite innerhalb eines td expandiert / setzt sich außerhalb des td fort

Hier ist die live-demo

Ich versuche eine gepolsterte text-Eingaben innerhalb ein td, und ich möchte es zu besetzen 100% der Breite, aber es geht außerhalb des td.
Ich verstehe nicht, warum das passiert, weiß niemand?

CSS

  table{
    border: solid 1px gray;
    width: 90%;
  }
  input{ width: 100%; padding:10px; }

HTML

<table>
  <tr>
    <td style="width:150px;">Hello</td>
    <td><input type='text' value='hihihih'/></td>
  </tr>
</table>

InformationsquelleAutor der Frage Omu | 2011-09-23

css html

52

Erklärung

Hier ist ein link zu der W3C-Box-Modell, die im detail erklären, was passiert, um Ihr element.

Alle input-Elemente haben, die Grenzen von Standard-und möglicherweise auch Polsterung und Margen, aber am wichtigsten ist, es entspricht dem W3C-box-Modell-Spezifikationen mit den content-box.

Dies bedeutet, dass, wenn Sie setzen Sie die Breite auf 100%, wird die tatsächliche Größe des Elements größer als 100%, wenn Sie die padding/Grenzen, wie in den Bildern gezeigt oben.

Lösung

Hinzufügen Polsterung an den td zum manuellen einstellen der Breite der Eingabe, bis es ist, wo Sie es haben wollen. Denken Sie daran, dass das hinzufügen Polsterung an den Eingang bedeutet, dass Sie müssen hinzufügen, die den gleichen Betrag, um den td zu begegnen, hat die Erweiterung.

Hier ein live-Beispiel
```
input {
    width: 100%;
    padding: 10px;
    margin: 0px;
}

table .last, td:last-child { 
    padding: 2px 24px 2px 0px; 
}
```
Alternative Lösung

Können Sie auch die CSS3-version durch box-sizing (browser-Kompatibilität).

Diese Eigenschaft kann verwendet werden, zum wechseln zwischen den beiden box-Modelle und es wird sich Verhalten wie Sie es erwarten.

Hier ein live-Beispiel
```
input {
    width: 100%;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
```
Hier sind einige mögliche Duplikate die gleiche Frage
InformationsquelleAutor der Antwort ShadowScripter
5

Einfach. 100% width + padding, das ist, warum. Sollten Sie Polsterung für den wrapper, nicht input

InformationsquelleAutor der Antwort simoncereska
2

können Sie box-sizing - Eigenschaft für dieses, weil padding hinzufügen width in Ihrem Eingabefeld .

CSS:
```
input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
    padding: 10px;
}
```
aber es funktioniert nicht im IE7 -

InformationsquelleAutor der Antwort sandeep
1

Einfachste Weg ist, um die Polsterung als Prozent der Breite, subtrahiert von 100%.

Also:
```
input { 
   width:96%;
   padding:0 2%; 
}
```
InformationsquelleAutor der Antwort Jim Y

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.