• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

<div> in einer <form> passt sich nicht der Breite des Inhalts an

B

bounded

New member
Hallo,

Folgende HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Experimental</title>
		<style type="text/css">
			div#wrapper {
				background-color:#CCC;
				width:80%;
				margin-left:auto;
				margin-right:auto;
				height:1000px;
			}
			div#first {
				outline:1px solid yellow;
				margin:25px 25px 0 25px;
			}
			form {
				padding:15px;
			}
			div.form_wrapper {
				border:1px solid black;
				padding:25px;
			}
			label {
				outline:1px dotted red;
			}
			input {
				outline:1px dotted red;
			}
		</style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="first">
    			<form>
    				<div class="form_wrapper">
	    				<label>Hello</label>
						<input type="text"></input>
					</div>
    			</form>
    		</div>
    	</div>
    </body>
</html>
Das Problem ist, dass sich das umschließende Div (form_wrapper) nicht der Breite des Inhalts (hier: label und input) anpasst. Im Browser kann man das durch die schwarze Umrandung des wrappers und die gepunktete rote der beiden Kindelemente beobachten.

Warum ist das so? Was habe ich falsch gemacht?

bounded

EDIT: bitte entschuldigt die fehlerhafte Formatierung
 
kkapsner schrieb:
Ein Div nimmt immer so viel Platz in der Breite an, wie zur Verfügung steht.
Zum Vergrößern anklicken....
Habe ich mir auch schon gedacht. Wenn ich die Definition von form_wrapper mit display:inline; klappt es zwar mit der Breite, aber die Box verschiebt sich und sie lassen sich, falls ich mehrere Boxen habe, auch nicht mehr untereinander plazieren...
 
Danke für die Antwort.

Ich möchte die border - Eigenschaft der .form_wrapper Klasse dazu nutzen, um einen visuellen Rahmen um eine bestimmte Eingabe zu erzeugen. Dieser Rahmen soll sich der Breite des Objekts anpassen. Außerdem möchte ich rechts von div.form_wrapper noch ein paar weitere Elemente anfügen, die sich aus Usability-Gründen in der Nähe der <input> Eingabezeile befinden müssen.
 
Deine Anregung hat mir doch noch zum Ziel verholfen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Experimental</title>
		<style type="text/css">
			div#wrapper {
				background-color:#CCC;
				width:80%;
				margin-left:auto;
				margin-right:auto;
				height:1000px;
			}
			div#first {
				outline:1px solid yellow;
				margin:25px 25px 0 25px;
			}
			form {
				padding:15px;
			}
			span.form_wrapper {
				border:1px solid black;
				padding:25px;
				float:left;
			}
			div.div_wrap {
				outline:1px dotted black;
				width:100%;
				float:left;
				margin-bottom:10px;
			}
			label {
				outline:1px dotted red;
			}
			input {
				outline:1px dotted red;
			}
		</style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="first">
    			<form>
					<div class="div_wrap">
						<span class="form_wrapper">
							<label>Hello</label>
							<input type="text"></input>
						</span>
					</div>
					<div class="div_wrap" style="margin-bottom:0px;">
						<span class="form_wrapper">
							<label>Hello</label>
							<input type="text"></input>
						</span>
					</div>
					<div style="clear:left;"></div>
    			</form>
    		</div>
    	</div>
    </body>
</html>

Es gibt jetzt eine div_wrap Klasse mit width:100% und float:left, um die Elemente untereinander darzustellen. Die Eingabemaske wird von einem weiteren span-Container umgeben, der mit float:left; definiert wurde. Hier lag der Knackpunkt: Erst mit dieser Definition wurden die span's nicht mehr aufeinander sondern untereinander plaziert, weil jetzt die echte Höhe (also border+padding+content) und nicht nur content berücksichtigt wurde. Dieses Verhalten bei inline-Elementen war mir bislang unbekannt.

Bild: ohne float:left;

 
Die beiden floats und das width: 100% beim div sind unnötig: das span braucht nur ein display: inline-block;
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben