nicht angemeldet
Hallo zusammen,
ich möchte mit CSS drei Select elemente nebeneinander platzieren.
Ich habe mal zum testen folgendes ausprobiert:
Die erste Variante "showfiles" mit zusätzlichen divs funktioniert soweit.
Warum jedoch funktioniert die zweite Variante (showfiles_1) ohne zusätzliche Divs nicht, bzw. woher kommt die Verschiebung nach unten ?
Würde es für Variante 2 auch eine Lösung geben?
Zusätzlich würde mich noch folgendes interessieren:
Wie könnte man den drei Selects unterschiedliche Breiten geben?
Erstes Select 500px
zweites 120px
drittes 80px
Mir würde nur einfallen alle drei zusätzlich über die ID anzusprechen?
#sel_files {
width:500px;
}
#sel_filesize {
width:120px;
}
#sel_filedate {
width:80px;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
#showfiles{
width:720px;
}
#showfiles div {
float:left;
padding: 2px;
}
#showfiles label {
display:block;
}
#showfiles select {
width:150px;
}
#showfiles_1{
width:720px;
}
#showfiles_1 label {
display:block;
}
#showfiles_1 select {
float:left;
width:150px;
}
</style>
<body>
<div id="showfiles">
<div>
<label for="sel_files">Anzeige1</label>
<select name="sel_files" size="5" id="sel_files">
<option value=""></option>
</select>
</div>
<div>
<label for="sel_filesize">Anzeige3</label>
<select name="sel_filesize" size="5" id="sel_filesize">
<option value=""></option>
</select>
</div>
<div>
<label for="sel_filedate">Anzeige3</label>
<select name="sel_filedate" size="5" id="sel_filedate">
<option value=""></option>
</select>
</div>
</div>
<div style="clear:left"></div>
<hr>
<div id="showfiles_1">
<label for="sel_files_1">Anzeige1</label>
<select name="sel_files_1" size="5" id="sel_files_1">
<option value=""></option>
</select>
<label for="sel_filesize_1">Anzeige3</label>
<select name="sel_filesize_1" size="5" id="sel_filesize_1">
<option value=""></option>
</select>
<label for="sel_filedate_1">Anzeige3</label>
<select name="sel_filedate_1" size="5" id="sel_filedate_1">
<option value=""></option>
</select>
</div>
</body>
</html>
vielen Dank und viele Grüße
hawk