Justus: Mehrzeiligen Text bündig neben Radiobuttons

Beitrag lesen

Liebe Forumsuser,

ich suche nach einer Möglichkeit den Text neben Radiobuttons bzw. Checkboxen bündig darstellen zu lassen. Derzeit steht bei einem Zeilenumbruch der Text unterhalb des Radiobuttons, was nicht besonderes elegant aussieht. Ich habe bereits versucht den Text in ein Label zu packen und mit einer Margin-left zu versehen, das hat aber nciht geklappt und ich weiß auch nicht, ob ein Label das richtige Element dafür ist.

Bisher habe ich folgendes programmiert.

  
<div id="Auswahl1">  
			<p>4.6 Wie informieren Sie sich in der Regel über aktuelle Events?? (Mehrfachnennungen möglich)</p>  
			<div id="Auswahlboxen">  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Zeitungen" <?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Zeitungen") {echo "checked";}}?>/> Zeitungen (FAZ, FASZ, TAZ, Zeit, etc.)<br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Internet"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Internet") {echo "checked";}}?>/> Internet <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Flyer"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Flyer") {echo "checked";}}?>/> Flyer <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Twitter"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Twitter") {echo "checked";}}?>/> Twitter <br>  
			</div>  
			<div id="Auswahlboxen">  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Magazine"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Magazine") {echo "checked";}}?>/> Stadtmagazine (Journal X-Art, Lolita, etc.) <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="TV"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="TV") {echo "checked";}}?>/> TV <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Newsletter"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Newsletter") {echo "checked";}}?>/> Newsletter <br>				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Facebook"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Facebook") {echo "checked";}}?>/> Facebook <br>  
			</div>  
			<div id="Auswahlboxen">  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Empfehlung"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Empfehlung") {echo "checked";}}?>/> <label>Magazine </label> <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Radio"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Radio") {echo "checked";}}?>/> Radio <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Freunde"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Freunde") {echo "checked";}}?>/> Freunde/Bekannte <br>  
				<input type=checkbox class="radiobuttongroup" name="InfoAusstellungen[]" value="Sonstiges"<?for ($i=0; $i<count($_SESSION['InfoAusstellungen']); $i++) { if ($_SESSION['InfoAusstellungen'][$i]=="Sonstiges") {echo "checked";}}?>/> Sonstiges <br>  
			</div>  
		</div>		  

mit Diesem CSS-Attributen:

  
#Auswahl1 {  
	  background: #95B8EB;  
	  ccolor:black;  
	  display:  block;  
	  border-style: solid;  
	  border-color: black;  
	  border-width: 1px;  
	  height: auto;  
	  width: 1260px;  
	  margin-bottom: 0.5cm;  
	  font-weight: bold;  
	  margin-left: auto;  
	  margin-right:auto;  
	  font-size: 20;  
	  padding-bottom:0.2cm;  
	}  

Zu beachten ist vll, dass sich das ganze nicht durch breitere Boxen lösen lässt, da das ganze auf die Bildschirmgröße eines Tablets angepasst ist.

Vielen Dank schon mal vorab für etwaige Hilfe!

Gruß

Justus