Ich hoffe, eine Ressource für die Anordnung von Eingabeelementen in einer HTML-Seite zu finden. Ich finde es schwierig, ein Auswahlelement und ein Textfeld auf die gleiche Breite zu bringen, selbst wenn ich das Stilattribut width verwende, und in verschiedenen Browsern ist es sogar noch schwieriger. Schließlich scheint es unmöglich zu sein, Dateieingaben browserübergreifend auf dieselbe Breite zu bringen. Gibt es irgendwelche guten Anleitungen oder Tipps, wie man dies erreichen kann? Vielleicht gibt es einige Standard-CSS-Attribute, die ich einstellen sollte.
Antworten
Zu viele Anzeigen?
Ich habe dies in Internet Explorer 7, Firefox 3 und Safari/Google Chrome getestet. Ich sehe definitiv das Problem mit <select> y <input type="file"> . Meine Ergebnisse haben gezeigt, dass, wenn Sie alle Eingänge mit der gleichen Breite gestalten, die <select> wäre in allen Browsern etwa 5 Pixel kürzer.
Die Verwendung des Eric Meyer CSS-Reset-Skript hilft bei diesem Problem nicht, aber wenn Sie einfach Ihre <select> Eingaben 5 Pixel breiter ist, erhalten Sie eine sehr gute (wenn auch nicht perfekte) Ausrichtung in den wichtigsten Browsern. Der einzige, der sich davon unterscheidet, ist Safari/Google Chrome, und der scheint 1 oder 2 Pixel breiter zu sein als alle anderen Browser.
Was die <input type="file"> betroffen ist, haben Sie dort nicht viel Flexibilität bei der Gestaltung. Wenn JavaScript für Sie eine Option ist, können Sie die Methode im Quirksmode angezeigt um eine bessere Kontrolle über das Styling des Datei-Upload-Steuerelements zu erhalten.
Siehe mein vollständiges Arbeitsbeispiel unten in XHTML 1.0 Strict für ein typisches Formular mit einheitlichen Eingabebreiten. Beachten Sie, dass hier nicht der Trick mit der 100%igen Breite verwendet wird, auf den andere hier hingewiesen haben, weil er das gleiche Problem mit inkonsistenten Breiten hat. Außerdem werden keine Tabellen zur Darstellung des Formulars verwendet, da Tabellen nur für tabellarische Daten und nicht für das Layout verwendet werden sollten.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Form</title>
<style type="text/css">
label,
input,
select,
textarea {
display: block;
width: 200px;
float: left;
margin-bottom: 1em;
}
select {
width: 205px;
}
label {
text-align: right;
width: 100px;
padding-right: 2em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>User Profile</legend>
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text" />
<br class="clear" />
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text" />
<br class="clear" />
<label for="fav_lang">Favorite Language</label>
<select id="fav_lang" name="fav_lang">
<option value="c#">C#</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
</select>
<br class="clear" />
<label for="bio">Biography</label>
<textarea id="bio" name="bio" cols="14" rows="4"></textarea>
<br class="clear" />
</fieldset>
</form>
</body>
</html>
Ron Savage
Punkte
10579
Dalius
Punkte
706
Ich habe festgestellt, dass, wenn Sie die Wählen Sie y Eingabe Element-Rahmen und -Padding auf 0 setzen, sind sie gleich breit. (Getestet mit Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)
Durch das Einfügen von 1px border/padding bei Select- und Input-Elementen wird das Input-Element 2 Pixel breiter. Zum Beispiel:
<form class="style">
<input name="someInput" />
<select name="options">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
.style select {
width: 100px;
padding: 1px;
border: 1px solid black;
}
.style input {
width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
(select element seems to put border inside, not outside?) */
padding: 1px;
border: 1px solid black;
}
Matthew Scharley
Punkte
121038
Abgesehen von der Breite würde ich auch den Rahmen und den Rand einstellen, die sich auf Ihre Steuerelemente auswirken können oder auch nicht. Etwas wie dies kann helfen:
input, select {
width: 100px;
margin: 0px;
border: 1px solid;
}Ron hat auch eine gute Idee.
Dave Rutledge
Punkte
5525
Beginnen Sie Ihre CSS-Dateien mit einigen Grundeinstellungen? Es kann nützlich sein, Padding und Margin für alle Elemente auszuschalten. Ich habe nicht getestet, ob dies Auswirkungen auf Auswahl-/Eingabeelemente haben könnte.
Hier ist ein Beispiel für einen CSS-Reset von Eric Meyer:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
- See previous answers
- Weitere Antworten anzeigen
