Gibt es eine einfache Möglichkeit, ein HTML-Textfeld und einen Eingabetyp = "Text" zum Rendern mit (ungefähr) gleicher Breite (in Pixel) zu erhalten, der in verschiedenen Browsern funktioniert?Gibt es eine einfache Möglichkeit, HTML Textarea und Eingabe Text gleich breit zu machen?
Eine CSS/HTML-Lösung wäre brillant. Ich würde es vorziehen, kein Javascript zu verwenden.
Dank /Erik
Sie sollten
.mywidth {
width: 100px;
}<input class="mywidth">
<textarea class="mywidth"></textarea>Das scheint nicht mehr zu funktionieren, aber diese Lösung: http://stackoverflow.com/questions/9555877/getting-html- textarea-controls-to-expand-to-width-of-container/9556001 # 9556001 does – H2ONOCK
Ja, es ist verwenden können. Versuchen Sie etwas wie folgt:
<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />
Beide sollten gleich groß sein. Sie können es mit absoluten Größen (px), relativen Größen (em) oder prozentualen Größen machen.
Nur eine Anmerkung - die Breite wird immer von etwas beeinflusst, was auf der Client-Seite passiert - PHP kann diese Art von Dingen nicht beeinflussen.
Das Festlegen einer gemeinsamen Klasse für die Elemente und das Festlegen einer Breite in CSS ist Ihre sauberste Wette.
Jemand anderes erwähnte dies und löschte es dann. Wenn Sie alle Textfelder stylen möchten und Text gibt die gleiche Art und Weise ohne Klassen, verwenden Sie die folgende CSS (nicht in IE6 funktioniert):
input[type=text], textarea { width: 80%; }
eine CSS-Klasse für die Breite verwenden, dann Elemente in HTML DIVs setzen, Divs mit der genannten Klasse.
Auf diese Weise sollte die Layout-Kontrolle insgesamt besser sein.
Dies ist eine CSS-Frage: die Breite der Grenze und Polsterung Breite umfasst, die unterschiedlichen Vorgaben für INPUT und TEXTAREA- in verschiedenen Browsern, also solche, wie sie auch das gleiche machen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>
Dies beschrieben wird die Box dimensions Abschnitt der CSS-Spezifikation, die sagt:
die Box Breite durch die Summe der linken und rechten Rand angegeben, Rahmen und Polsterung und den Inhalt der Breite.
Um die erste Frage zu beantworten (obwohl es bis zum Tod beantwortet wurde): Eine CSS-Breite ist, was Sie brauchen.
Aber ich wollte Gaius's question in den Antworten beantworten. Gaius, du hast das Problem, dass du die Breite in ems eingibst. Dies ist eine gute Idee zu tun, aber Sie müssen daran denken, dass ems auf Schriftgröße basieren. Standardmäßig haben ein Eingabebereich und ein Textbereich unterschiedliche Schriftgrößen & Größen. Wenn Sie also die Breite auf 35em einstellen, verwendet der Eingabebereich die Breite der Schriftart, und die Textfläche verwendet die Breite der Schriftart. Die Standardschriftart für den Textbereich ist kleiner, daher ist das Textfeld kleiner.Entweder setzen die Breite in Pixel oder Punkte, oder stellen Sie sicher, dass die Eingabefelder und Textbereiche haben die gleiche Schriftart & Größe:
.mywidth {
width: 35em;
font-family: Verdana;
font-size: 1em;
}<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>Hoffnung, das hilft.
Wie in Unequal Html textbox and dropdown width with XHTML 1.0 strict erwähnt, hängt es auch von Ihrem Doctype ab. Ich habe festgestellt, dass bei Verwendung von XHTML 1.0 streng, der Unterschied in der Breite tatsächlich erscheint.
Sie können auch den folgenden CSS:
.mywidth{
width:100px;
}
textarea{
width:100px;
}
HTML:
<input class="mywidth" >
<textarea></textarea>
Ihre erste Lösung wurde bereits von der angenommenen Antwort erwähnt, und die zweite Lösung wird alle 'textarea's 100px breit machen. – Manuel
Verwenden CSS3 Textbox und Eingabe Arbeit das gleiche zu machen. Siehe jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="text"] { width: 60%; }
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
Siehe die Antwort auf [HTML Erste Textfeld steuert auf die Breite des Behälters zu erweitern] (http://stackoverflow.com/a/9556001/165673), es ist besser als die Antworten hier eingeschlossen. Oder für eine vollständige Erklärung: [Box Sizing | CSS-Tricks] (http://css-tricks.com/box-sizing/) – Yarin