[Ovillo] Maquetar formularios con CSS sin tablas
Julian Reyes
julian.reyes.escrigas en gmail.com
Mie Sep 30 01:09:34 UTC 2009
> Con esto se alinea al <label> mas largo.
> [CSS]
> ol {display: table}
> ol > li {display: table-row}
> ol > li label {display: table-cell}
> ol > li input {display: table-cell}
>
gracias al consejo de miguel hice lo siguiente no se si es correcto pero
se ve bien
[CSS]
input[type="checkbox"]{vertical-align:middle;height:1em;width:1em;}
ol {display: table; float:left;}
ol > li {display:table-row;}
ol > li label {display:
table-cell;padding-right:10px;padding-left:10px;}
ol > li input {display: table-cell;}
.numero {width:2.5em;}
.texto {width:20em;}
.texto_largo{width:30em;}
[HTML]
<fieldset><legend>Personas</legend>
<ol type="a">
<li><label>Padre</label><INPUT type="text" class="numero"></li>
<li><label>Madre</label><INPUT type="text" class="numero"></li>
<li><label>Esposo</label><INPUT type="text" class="numero"></li>
<li><label>Esposa</label><INPUT type="text"class="numero"></li>
</ol><ol type="a">
<li><label>Hermanos/as</label><INPUT type="text" class="numero"></li>
<li><label>Hijos/as</label><INPUT type="text" class="numero"></li>
<li><label>Abuelos/as</label><INPUT type="text" class="numero"></li>
<li><label>Tios/as</label><INPUT type="text" class="numero"></li>
</ol><ol type="a">
<li><label>Otros</label><INPUT type="text"
class="numero"><label>Cuales</label><INPUT type="text"
class="texto_largo"></li>
<li><label>Ninguno</label><INPUT type="checkbox" ></li>
</ol>
</fieldset>
de esa manera conseguí que se vieran en bloques parejos
Más información sobre la lista de distribución Ovillo