Formok táblázatok nélkül

Bevallom őszintén mér rég a tableless élharcosának számítottam, amikor még vissza – visszanyúltam a jó öreg táblázatokhoz amikor a formjaim megjelenését akartam megzabolászni. Biztos voltam benne, hogy az a probléma, hogy alapból az input mezők különböző hosszúak és emiatt függőlegesen egymás alatt girbegurbán helyezkednek el orvosolható tisztán CSS-sel táblázat beiktatása nélkül.
Persze igazam is volt. A hogyanra pár gyenge próbálkozás után a google adta meg a választ. 🙂

Az ehhez szükséges html kód rendkívül egyszerű:

<form action="index.php" method="get">
	<label for="nev">Név: </label>
	<input type="text" name="nev" /><br>
	<label for="cim">Lakcím: </label>
	<input type="text" name="cim" />
</form>

Aztán a css se túl bonyolult:

input {width: 150px;
   float: left;
   margin-bottom: 10px;}
label {float: left;
   width: 75px;
   margin-bottom: 10px;
   clear:left;}

És az eredmény íme.
Voálá – ahogy kínában mondják!