Nehmen wir an, ich habe ein Textfeld, in das ich eine ganze Zeile einfügen möchte. Ich würde es so gestalten:
input.wide {display:block; width: 100%}Dies führt zu Problemen, da die Breite auf dem Inhalt des Textfelds basiert. Textfelder haben standardmäßig Ränder, Ränder und Auffüllungen, wodurch ein Textfeld mit einer Breite von 100% größer als sein Container ist.
Zum Beispiel hier rechts:
Gibt es eine Möglichkeit, ein Textfeld dazu zu bringen, die Breite seines Containers zu füllen, ohne darüber hinaus zu expandieren?
Hier ist ein Beispiel-HTML, um zu zeigen, was ich meine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>Wenn dies ausgeführt wird, können Sie anhand des "normalen" Textfelds erkennen, dass das "breite" Textfeld über den Container hinausragt. Das "normale" Textfeld wird an den tatsächlichen Rand des Containers verschoben. Ich versuche, das "breite" Textfeld dazu zu bringen, seinen Container zu füllen, ohne über die Kante hinaus zu expandieren, wie es das "normale" Textfeld ist.