[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