Liebe Mitlesende,
ich möchte ein Formular gestalten. Folgendes Markup sei gegeben:
<form ...>
<p>
<label for="sorte">Eissorte </label>
<select name="sorte" id="sorte">[...]</select>
<label for="behaeltnis">Behältnis </label>
<select name="behaeltnis" id="behaeltnis">[...]</select>
<input type="submit" value="bestellen" />
</p>
</form>
Gewünschtes Aussehen:
Eissorte <Erdbeer...>
Behältnis <Waffel..> [bestellen]
(oder auch mit dem [bestellen]-Button in einer neuen Zeile)
Mein erster Lösungsgedanke war, dass jedes select-Element mit der Pseudoklasse :after einen Zeilenumbruch erhält. Dieser Lösungsweg ist in meinem FF aber kläglich gescheitert. Folgender Code hat keine sichtbaren Auswirkungen gehabt:
select:after { white-space: pre-line; content: "\a"; }
Anscheinend mag der FF keine Pseudoklasse :after (oder auch :before) bei <select>-Elementen.
Mein zweiter Versuch war dann, dass jedes <label>-Element eine neue Zeile beginnt. Das habe ich mit der Pseudoklasse :before gelöst:
label:before { white-space: pre-line; content: "\a"; }
Soweit klappt das in meinem FF auch (IE mache ich später folgsam).
Nun das Problem: Ich möchte ja alle Labels mit identischer Breite. Folgender Versuch bringt zwar eine identische Breite, zerstört aber den vorher eingerichteten Zeilenumbruch:
label { display: inline-block; width: 4em; }
Anscheinend gelingt die vorherige CSS-Regel mit :before nur in bestimmten Ausnahmefällen...? Oder hat jemand eine andere Erklärung, warum das so nicht klappen will, oder weiß gar, wie ich stattdessen vorgehen muss?
Liebe Grüße,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)