Gunther: Problem bei anordnen von LABEl, INPUT in einem Formular

Beitrag lesen

Hi Max!

Das ist mein HTM

<div class="listform">

<ul>
<li>
<label>Titel</label>
<input name="titel" type="text">
<div class="info">Information</div>
</li>
<li>
<label>Titel3</label>
<input name="titel3" type="text">
<div class="info">weitere Information</div>
</li>
</ul>
</div>


>   
>   
> eigentlich sollte das Label links sein  
> die Eingabe rechts  
> und die Infos unter der Eingabe.  
>   
> Aber es haut nicht hin.  
>  und der (doofe) Border von UL umschliesst die LISTEN auch nicht....  
  
Du möchtest also [dieses hier](http://jsfiddle.net/t7MxN/1/) erreichen, wenn ich dich richtig verstanden habe?  
  
CSS des Beispiels:  
~~~css
  
.listform ul {  
	padding:0;  
	display: block;  
	border: 1px solid #FF0000;  
	list-style-type: none;  
	list-style: none;  
}  
  
.listform  li {  
	border-bottom: #C0C0C0 1px dotted;  
}  
  
.listform label {  
	font-size: 14px;  
	width:200px;  
	float:left;  
	display: block;  
	font-weight:bold;  
}  
  
.listform input {  
	float: left;  
	width: 70%;  
	font-size: 14px;  
}  
  
.listform .info {  
	padding: 10px 0 20px 200px;  
	clear: left;  
	font-size: 11px;  
} 

Das stellt jetzt keineswegs eine "endgültige Lösung" dar, sondern vielmehr die Minimal-Korrekturen, um das von dir beschriebene Ergebnis zu erreichen.

Der "Ansatz" hat aber diverse "Probleme". So z.B. wenn der Viewport so schmal ist, dass die 200px feste Breite des Labels größer als 30% sind.

Von daher würde ich ggf. zu einem "flexibleren" Ansatz raten.

BTW: Wenn alle Kind-Elemente des Elternelements gefloatet sind, dann besitzt das (Eltern)Element selbst keine Höhe (height = 0). Deshalb hatten deine 'li' Elemente keine Höhe, weshalb die Border die anderen Elemente auch nicht umschlossen hat. In meinem angepassten CSS sind die 'p' Elemente (als Ersatz für deine DIVs) nicht mehr gefloatet.

Oder wenn wirklich alle Kindelemente gefloatet werden sollen, dann musst du einen neuen "block formatting context" erzeugen.

Gruß Gunther