Hallo,
habe ein Formular mit mehreren Zeilen in denen jeweils ein Label links vor einem "Eingabefeld" (input type="text", select) steht.
Nun möchte ich dass die Eingabefelder übereinander linksbündig ausgerichtet sind. Dies wäre mit einer width-Angabe für die Labels zu erreichen. Damit width auf das inline-Element label anwendbar ist, muss ich label mit float:left stylen.
Ich möchte gerne ein CSS formulieren, dass float:left nur zugewiesen wird wenn ein input-Element folgt. Es gibt eben andere Files
HTML:
<label>Label 1</label>
<input type="text" .../>
<div class="clear" />
<label>Label 2</label>
<select>...
CSS (nicht funktionierend):
label,
select,
input[type="text"]
{
vertical-align: baseline; /* Label-Text und Eingabe-/Select-Text auf gleicher Höhe */
}
label + select,
label + input[type="text"]
{
float: left;
}
Funktioniert nicht, da das zweitgenannte Element Ziel der Zuweisung ist und die Reihenfolge der Elemente genauso sein muss. Siehe
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html#heading-5.7
wenn ich das im CSS umkehre ...
select + label,
input[type="text"] + label
{
float: left;
}
... muss ich im HTML-Code die Label-Tags nach den input-Tags angeben.
Dies ist für die Wartbarkeit des Codes wieder schlecht, da ein Anderer der dies später zu bearbeiten hat, nicht unbedingt gleich sieht warum label nach input "codiert" ist. Außerdem müsste man diese Vorgehensweise an Alle Entwickler publizieren, da es sich um ein zentrales css-File handelt.
Frage:
seht Ihr eine Möglichkeit mein Ziel mit einem CSS-Selektor zu erreichen?
(ohne eine class für solche label-Tags vergeben zu müssen).
Einen Seiteneffekt hat das float: nun greift das vertical-align: baseline nicht mehr und der Label-Text hängt höher als der Eingabetext.
Why??
Danke!
Gruß, Robert