CSS-Enthält die Eingabe von text 100% width
Also wenn ich die Eingabe wie in diesem Beispiel das Textfeld ein, weil es einen Rahmen hat und Polsterung standardmäßig breiter als 200px.
<div style="width:200px; background-color:red;">
<input type="text" name="fname" style="width:100%;"/>
</div>
Ich weiß, ich kann die Kraft der text-box, die passen in die 200px durch festlegen einer Klasse für den input-tag und tagging es mit diesem CSS -
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Gibt es einen besseren Weg, um dieses Textfeld, um die Größe korrekt, D. H. zum füllen 100% wie ich es will? Ich kann nicht mit festen Größen. Ich bin mit CSS-Designs, so dass Sie das Textfeld, Polsterung, Ränder, etc. sind nicht zur Kompilierzeit bekannt ist. Sie können verändert werden durch den Benutzer on-the-fly. So muss die Lösung funktioniert unabhängig davon, was der text-box - padding, border und margin.
InformationsquelleAutor der Frage w.donahue | 2012-01-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, Sie haben bereits Ihre eigene Frage beantwortet.
box-sizing: border-box;
ist wirklich die einzige CSS-Mittel, um das element zu passen im übergeordneten Element. css-tricks geht sehr ins detail über das hier.http://css-tricks.com/box-sizing/
Ich bin keine Kenntnis von einem anderen CSS könnten Sie andere als die Verwendung von javascript, um einige Berechnungen auszuführen, und ändern dann Ihre Eingabe-Elemente.
InformationsquelleAutor der Antwort mrtsherman
InformationsquelleAutor der Antwort Eric Yin
?
Aber im ernst, obwohl, hier ist eine jsfiddle.
InformationsquelleAutor der Antwort rockerest
Ja. Sie tun können.
Können Sie es tun, ohne mit
box-sizing
und nicht klar Lösungen wiewidth~=99%
.Demo auf jsFiddle:
HTML-markup:
CSS:
InformationsquelleAutor der Antwort Vladimir Starkov