Selektor label gefolgt von input

[fux]

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

[dave]

Hi,

[...] Dies wäre mit einer width-Angabe für die Labels zu erreichen. Damit width auf das inline-Element label anwendbar ist, muss

du daraus ein inline-block element machen.

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).

Nein.

~dave

[Gunnar Bittersmann]

@@fux:

nuqneH

Damit width auf das inline-Element label anwendbar ist, muss ich label mit float:left stylen.

Nein, es gibt eine Alternative.

Ich möchte gerne ein CSS formulieren, dass float:left nur zugewiesen wird wenn ein input-Element folgt.

Geht nicht. Ein CSS-Parser schaut nie nach vorne.

Qapla'

[fux]

Danke für Eure Hilfe!

Damit ist's gelöst.
inline-block hab ich früher schon mal gesehen. Hatte im Eclipse-CSS-Editor schon diverse display-Werte probiert, inline-block wird dummerweise nicht angeboten.

Gruß, Robert

[Beat]

Damit width auf das inline-Element label anwendbar ist, muss ich label mit float:left stylen.

Nö, display:inline-block; ist dafür besser geeignet.

mfg Beat