Problem bei anordnen von LABEl, INPUT in einem Formular

[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>

das ist mein CSS Code

  
  
.listform {}	  
	  
.listform ul { padding:0;  
display: block;  
border: 1px solid #FF0000;  
}  
	  
.listform  li{  
	list-style-type: none;  
	list-style: none;  
	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; float: left;font-size: 11px;}	  
  

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....

Max

[T-Rex]

Moin,

also erstmal räumen wir dein HTML code auf. Das div brauchst du nicht. Einfach entfernen. Eingabefelder sind keine Liste... ul und li einfach entfernen.
label ist okay, input auch. Das div ist ein span.

Label bekommt ein

display: inline-block;
width: 200px;

input bleibt wie es ist

der span wird mit
display: block
unter label und Input geschoben.

fertig.

Gruß
der NSA ausspionierende
T-Rex

[Gunther]

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