problem bei Anordung von dl dd dt

[Johnny990]

Hi zusammen ;)

Ich bekomms einfach nicht hin. Hab folgende Liste mit label und checkboxelementen:

<div id="service">
<form method="post" action=""  enctype="application/x-www-form-urlencoded" id="service_form">
<dl  class="form">
<dt id="Anfrage-label"><label class="optional"  for="Anfrage">Service auf Anfrage</label></dt>
<dd id="Anfrage-element">
<input type="hidden" value="0" name="Anfrage"><input  type="checkbox" checked="checked" value="1" id="Anfrage"  name="Anfrage"></dd>
<dt id="1-label"><label class="optional"  for="1">1</label></dt>
<dd id="1-element">
<input type="hidden" value="0" name="1"><input type="checkbox"  checked="checked" value="1" id="1" name="1"></dd>
<dt id="2"><label class="optional"  for="2">2</label></dt>
<dd id="2">
<input type="hidden" value="0" name="2"><input type="checkbox"  checked="checked" value="1" id="2" name="2"></dd>

Stellt nur einen Ausschnitt dar.

Will nun folgendes machen:
Bis jetzt werden die Elemente in der form angeordnet:

label checkbox
label checkbox
label checkbox
usw. usw

ich muss also jedes mal bis nach unten scrollen

es sollte nun so aussehen:

label checkbox | label checkbox | label checkbox
label checkbox | label checkbox | label checkbox
label checkbox | label checkbox | label checkbox
usw. usw.

Da ich noch ziemlicher css beginner mit ist das für mich gar nicht so einfach.

Kann mir evtl jemand dabei helfen. versuch schon seit stunden mein glück.

Vielen Dank für jegliche Hilfe

LG

 

[Efchen]

Warum muss es eine Definitionsliste sein?

Hier ist ein schönes Tutorial für nutzerfreundliche Formulare, damit sollte auch Dein Layout besser funktionieren:
Reine Formsache - Barrierefreie Formulare mit HTML, CSS & JavaScript : Einfach für Alle

 

[Johnny990]

kenn ich schon den link.

es muss jedoch mit einer definitionsliste sein. Benutze ein php framework welche das formular so generiert.

Muss doch irgendwie gehn oder?

 

[Efchen]

Du könntest sie alle floaten oder mit display:inline versehen, damit sie alle nebeneinander stehen. Wenn der Platz nicht mehr ausreicht, wird umgebrochen.

Schwierig an der Definitionsliste ist, dass <dt> und <dd> eigentlich zusammengehören, aber von keinem Element umschlossen werden. Und, ohne es auszuprobieren, eigentlich dürfte innerhalb von <dl> nur <dd> und <dt> erlaubt sein (analog zu <ul>) und kein weiteres Element, sonst könnte man die beiden mit einem <div> gruppieren. Dann wäre es wieder einfacher, diese Anordnung zu erreichen.