inline-Element mit fester Breite und Zeilenumbruch davor

[Felix Riesterer]

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.