Allineare campi e label dei form senza tabelle

Molte volte per allineare le eticchette dei campi dei form si è costretti ad utilizzare una tabella, oppure, come già vi ho presentato in altri post precedenti, si possono utilizzare dei servizi per crearli online; alcune volte però sono difficili da modificare.

Se vogliamo un form personalizzato con i campi e le label allineate è possibile, invece, utilizzare dei semplici css  [tableless].

Per esempio

CODICE FORM

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”/><br />
<label for=”address”>Address</label>
<input id=”address” name=”address”/><br />
<label for=”city”>City</label>
<input id=”city” name=”city”/><br />
</form>

CSS

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

2 commenti su “Allineare campi e label dei form senza tabelle”

Lascia un commento