[ERLEDIGT] Anordnung Input-Element mit CSS

[nordi]

Ich habe ein Formular, in dem tabellenähnlich mit CSS einige Daten rausgeschrieben werden sollen:

<span class='t.pname'><input type='checkbox' value='1' name='Ackerbohnen' checked><a id='Ackerbohnen1' href='#'>Ackerbohnen</a></span>
<span class='t-sorte'>Winterbohnen</span>
<span class='t-funk'>Hauptkultur</span>
<span class='t-herk'>Aussaat</span>
<span class='t-aussaat'>150217</span>
<span class='t-erntevon'>310517</span>
<span class='t-erntebis'>E0617</span>

CSS:

span.t-pname   { width: 100px; }
span.t-sorte   { width: 100px; float:left; }
span.t-funk    { width: 100px; float:left; }
span.t-herk    { width: 100px; float:left; }
span.t-aussaat { width: 55px; float:left; }
span.t-erntevon{ width: 55px; float:left; }
span.t-erntebis{ width: 55px; float:left; }

Das erste Feld (input-Element) wird jedoch erst am Ende gereiht (auch wenn in 't-pname; float:left' steht):

Winterbohnen, Hauptkultur, Aussaat, 150217, 310517, E0617, Ackerbohnen mit Checkbox.

Wie bekomme ich hier die Checkbox am Anfang der Ausgabe?

 

[SpiceLab]

Wie bekomme ich hier die Checkbox am Anfang der Ausgabe?

1. Den falsch benannten Klassennamen im HTML korrigieren.
2. float:left ergänzen, und width-Regel entsprechend aufstocken, damit im <span> ausreichend Platz gegeben ist, was bei mir eben nicht der Fall war.

Fiddle-Demo: https://jsfiddle.net/SpiceLab/zdekxh3h/

 

[nordi]

Danke, war ja einfach. Hab's einfach nicht gesehen.