Kleines Problem bei der Positionierung von Form Feldern

[webix]

Hallo,

ich möchte gerne mit Label und Form Tags das Formular wie folgt gestalten:

<fieldset>
Artikelnummer................|_________|
Produktbezeichnung.....|_____________|
..........................................|_____________|
..........................................|_____________|
Preis.................................|_______|
</fieldset>

Bisher sieht es bei mir wie folgt aus:

<fieldset>
Artikelnummer........................|_________|
Produktbezeichnung........|_____________|
.............................................|_____________|
.............................................|_____________|
Preis.........................................|_______|
</fieldset>

.form input {
        margin:0 0 5px 0;
	background:#EDF7FC;
	border:1px solid #AEDBF0;
	font:bold 13px Verdana, Arial, Helvetica, sans-serif;
	color:#267DAC;
	position:relative;
	display:block;
}

label
{
 	float:   	 left;
  	display:   	 block;
}

fieldset
{

  	 border:  	 1px solid #CCCCCC;
  	 display:  	 block;
  	 padding:  	 1em 2em;
  	 clear:  	 both;
}

Wie erreiche ich nun die linksbündige Positionierung der Felder, vergleichbar bei der Gestaltung mit Tabellen.

 

[Maik]

Und wie sieht der dazugehörige HTML-Code aus?

 

[webix]

Während ich den Beitrag editiert habe, gabs schon eine Antwort. Respekt

hier der HTML Quellcode:

 <fieldset class="form" style="width: 70%">
	        <label for="a" >Artikelnummer </label>
	        <input id="aa" type="text" name="aa" size="10" maxlength="10" value="" />
	        <label for="b">Produktbezeichnung </label>
	        <textarea name="bb" cols="28" rows="2"></textarea>
	        <label for="c">Preis </label>
	        <input id="cc" type="text" name="cc" size="6" maxlength="6" value="" />
	        <input type="submit" name="add" value="Artikel hinzufügen">
	    </fieldset>

 

[Maik]

Probier es mal so:

fieldset.form {
         border:1px solid #CCCCCC;
         display:block;
         padding:1em 2em;
         width: 70%;
}

fieldset.form input {
         margin:0 0 5px 0;
         background:#EDF7FC;
         border:1px solid #AEDBF0;
         font:bold 13px Verdana, Arial, Helvetica, sans-serif;
         color:#267DAC;
         position:relative;
}

fieldset.form input, fieldset.form textarea {
         margin-left:200px;
         display:block;
}

label {
         float:left;
         display:block;
}

<form>
    <fieldset class="form">
          <p><label for="a">Artikelnummer</label><input id="aa" type="text" name="aa" size="10" maxlength="10" value="" /></p>
          <p><label for="b">Produktbezeichnung</label><textarea name="bb" cols="28" rows="2"></textarea></p>
          <p><label for="c">Preis</label><input id="cc" type="text" name="cc" size="6" maxlength="6" value="" /></p>
          <p><input type="submit" name="add" value="Artikel hinzufügen" /></p>
    </fieldset>
</form>