Radio-Button - Beschriftung korrekt umbrechen

[FK]

Hallo,

ich habe ein Problem bei der Gestaltung eines Formulars und kann leider keine Lösung dafür finden.

Ich verwende in dem Formular mehrere Radiobuttons. Deren Beschriftung ist sehr lang, weswegen ich sie gerne in mehreren Zeilen ausgeben will. Wenn ich den Text nach dem Radiobutton aber mit <br> umbreche, dann beginnt die nächste Zeile zu weit links (unter dem Radiobutton) und nicht bündig mit der ersten Zeile.

Wie kann man dieses Verhalten umgehen?

Hier ist der HTML-Code, den ich verwende:

<p>
<input type="Radio" id="radio02" name="test" value="radio02">
<label for="radio02">Langer Text<br>Noch mehr Text</label>
</p>

Vielen Dank schon mal im Voraus!

[Ashura]

Hallo FK.

Ich verwende in dem Formular mehrere Radiobuttons. Deren Beschriftung ist sehr lang, weswegen ich sie gerne in mehreren Zeilen ausgeben will. Wenn ich den Text nach dem Radiobutton aber mit <br> umbreche, dann beginnt die nächste Zeile zu weit links (unter dem Radiobutton) und nicht bündig mit der ersten Zeile.

Wie kann man dieses Verhalten umgehen?

Lasse sowohl input- als auch label-Element linksbündig http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten.

Einen schönen Mittwoch noch.

Gruß, Ashura

[FK]

Hallo Ashura,

vielen Dank für die schnelle Hilfe.
Jetzt klappts!

Allerdings hab ich nur bei den Inputs style="float:left" hinzugefügt. Wenn ich das bei den Labels auch noch mache, werden alle Radiobuttons in der selben Zeile angezeigt.

[Ashura]

Hallo FK.

Allerdings hab ich nur bei den Inputs style="float:left" hinzugefügt. Wenn ich das bei den Labels auch noch mache, werden alle Radiobuttons in der selben Zeile angezeigt.

Natürlich. Du musst zwischenzeitlich den Dokumentenfluss mittels http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear wiederherstellen, wenn diese Elemente auch untereinander stehen sollen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[FK]

Hallo Ashura,

leider klappt das doch nicht so, wie ich mir das vorgestellt hab.

Der IE zeigt die Seite so an, wie ich mir's vorstell. Mozilla bzw. Firefox zeigt die zweite Zeile jedoch weiterhin unter dem Radiobutton an.

Ich hab jetzt folgenden Code:

<p>
<input type="Radio" id="radio01" name="test" style="float:left;clear:left" checked>
<label for="radio01" style="float:left:left">Button 1</label>
</p>

<p>
<input type="Radio" id="radio02" name="test" style="float:left;clear:left">
<label for="radio02" style="float:left:left">Button2<br>Button2</label>
</p>

<p>
<input type="Radio" id="radio03" name="test" style="float:left;clear:left">
<label for="radio03" style="float:left:left">Button 3</label>
</p>

Ich komme leider nicht weiter.
Auch wenn ich das float:left aus den labels raus lassen, habe ich genau den selben Effekt.

[Ashura]

Hallo FK.

Der IE zeigt die Seite so an, wie ich mir's vorstell. Mozilla bzw. Firefox zeigt die zweite Zeile jedoch weiterhin unter dem Radiobutton an.

Natürlich, ganz genau so, wie du es ihm gesagt hast.

Ich hab jetzt folgenden Code:

<input type="Radio" id="radio01" name="test" style="float:left;clear:left" checked>

Damit floatet das input-Element links und stellt augenblicklich den Elementfluss wieder her. Alle nachfolgenden, per float formatierten Elemente müssen werden daher erst wieder unterhalb gefloatet.

Auch wenn ich das float:left aus den labels raus lassen, habe ich genau den selben Effekt.

Setze das clear:left einmal für das p-Element.

Einen schönen Mittwoch noch.

Gruß, Ashura

[FK]

Hallo Ashura,

vielen Dank nochmal!

Jetzt zeigen sowohl IE als auch Firefox den Zeilenanfang richtig an.
Allerdings hab ich jetzt im Firefox absolut keinen Abstand mehr zwischen den einzelnen Radiobuttons (bzw. den <p>-Tags). Selbst mit margin-top und margin-bottom bekomm ich keinen Abstand mehr rein. Der IE zeigt den Abstand ganz normal an.

Hm, und ich dachte, das wär ganz einfach :)

[Ashura]

Hallo FK.

Allerdings hab ich jetzt im Firefox absolut keinen Abstand mehr zwischen den einzelnen Radiobuttons (bzw. den <p>-Tags). Selbst mit margin-top und margin-bottom bekomm ich keinen Abstand mehr rein.

Verpasse nicht dem p-Element das margin sondern dem label-Element.

Einen schönen Mittwoch noch.

Gruß, Ashura

[FK]

Hallo Ashura,

klappt leider noch immer noch nicht perfekt.
Jetzt sind der Radiobutton und der Text bei einzeiligen Einträgen nicht mehr auf der selben Höhe?

Ich habs jetzt anders gelöst und eine Tabelle genommen, auch wenn mir die andere Lösung besser gefallen hätte.

Vielen Dank nochmal für Deine Hilfe!

[Ashura]

Hallo FK.

Jetzt sind der Radiobutton und der Text bei einzeiligen Einträgen nicht mehr auf der selben Höhe?

Kann ich weder im IE noch im Fx bestätigen.

Ich habs jetzt anders gelöst und eine Tabelle genommen, auch wenn mir die andere Lösung besser gefallen hätte.

Ist auch eine legitme Möglichkeit, da Formulardaten als tabellarische Daten strukturiert werden können.

Einen schönen Mittwoch noch.

Gruß, Ashura