inline-Element mit fester Breite und Zeilenumbruch davor

[Der Martin]

Hallo Felix,

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>

  
warum nicht ein fieldset anstatt des p-Elements?  
  

> 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.  
  
Das dürfte daran liegen, dass ein Zeilenumbruch, wenn er mit der content-Eigenschaft eingefügt wird, die gleiche Wirkung hätte wie ein Zeilenumbruch im Quellcode: Er wird als Whitespace interpretiert.  
  

> `select:after { white-space: pre-line; content: "\a"; }`{:.language-css}  
  
Bist du sicher, dass du Linefeed meintest, und nicht Carriage Return oder gar eine Kombination aus beiden? Abgesehen davon ist die Notation irreführend: Auch wenn CSS keine C-typischen Escapes verwendet, denkt man beim Lesen von "\a" spontan zunächst an Ctrl-G. Die Notation "\0A" wäre lesefreundlicher.  
  

> 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"; }`{:.language-css}  
>   
> Soweit klappt das in meinem FF auch.  
  
Das überrascht mich - auch hier hätte ich erwartet, dass das Linefeed als normales Whitespace-Zeichen interpretiert wird.  
  
Allem Ehrgeiz zum Trotz halte ich aber wie Vinzenz Formulare für einen sinnvollen Einsatzfall von dl oder table.  
  
So long,  
 Martin  

-- 
Computer funktionieren grundsätzlich nicht richtig.  
Wenn doch, hast du etwas falsch gemacht.