Checkbox-DB-Menü mit CSS formatieren

Hallo,

in einem meiner Formulare verwende ich das Checkbox-DB-Menü. Bei einigen Einträgen ist der Labeltext länger und wird umgebrochen und unter der Checkbox weitergeschrieben. Dies sieht natürlich nicht sonderlich gut aus. In HTML sieht ein Eintrag so aus:

Code:

---

<div id="ctrl_155" class="checkbox_container">
<span>
<input id="opt_155_0" class="checkbox" type="checkbox" value="B01" name="berufe[]">
<label for="opt_155_0">Verkäufer/in und Einzelhandelskauffrau/mann</label>
</span>
<span>
....
</span>

---

Ich hätte nun gerne einen hängenden Einzug, damit der umgebrochene Text nicht unter der Checkbox steht. Ich habe per CSS <span> mit "display=block" formatiert. <label> wurde auf "display: inline" gesetzt. Ich habe es mit margin-left und text-indent versucht, aber vergebens. Hat jemand ein Tipp für mich?

Gruß

Michael

Hi,
hast du mal versucht, sowohl <input> als auch <label> auf display:block zu setzen?
<input> zusätzlich float:left, damit die beiden nebeneinander stehen. <span> mit display:block sorgt dafür, dass das nächste span in einer eigenen Zeile steht.

Ist allerdings nicht getestet...

Gruß, folkfreund

Hallo folksfreund,

vielen Dank für deine schnelle Antwort. Dein Tipp war mal der Schritt in die richtige Richtung, allerdings funktioniert das auch nur, wenn die Beschreibung nicht größer als die Checkbox ist. Ich habe dann wieder mit text-indent herumexperimentiert, was aber auch nichts brachte. Letztlich habe ich es jetzt mit folgenden CSS geschafft:

Code:

---

.checkbox_container span label
{
        display:block;
        margin-left:3em;
        padding-bottom:0.1em;
        font-weight:normal;
        line-height:1.2;
}

.checkbox_container span input.checkbox
{
        float:left;
        display:block;
        margin-right:10px;
        margin-left:10px;
}

---

Gruß

Michael