Formok táblázatok nélkül

tablelessBevallom ő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!

2 thoughts on “Formok táblázatok nélkül

  1. szia!
    position: relative divbe rakva az így formázott form kilóg lefele. tudom, h egy clear: both-os elem utána megoldja a dolgot, de nincs erre olyan megoldás, amivel nem kell fölösleges elemet elhelyezni az oldalban?

    köszi! 🙂

    üdv: rrroka

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.