¿Cómo alinear elementos de formulario por bloques como en la imagen? HTML/CSS

Iniciado por NathanD, 22 Septiembre 2014, 20:52 PM

0 Miembros y 1 Visitante están viendo este tema.

NathanD

Buenas, llevo bastante tiempo dándole vueltas a cómo hacer lo de la siguiente imagen, y la verdad es que no tengo ni idea.



No pongo el código porque básicamente es inútil, mi problema es el concepto.

Estaría muy agradecido si me ayudarais aunque fuera a plantearlo.

DaNuK

no te entiendo a que te refieres con concepto, lo que intentas hacer ya es cuestion de diseño y para lograrlo necesitas usar css

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>

NathanD

Pues a si tengo que agrupar los elementos con divs, párrafos, qué grupos hacer, cómo hacer la alineación...

Gracias por responder.

DaNuK

tan facil como hacer esto
Código (html4strict) [Seleccionar]

<form action="" id="frm">
<legend>Mi formulario</legend>
<div class="controles">
<label for="">etiqueta 01</label>
<input type="text">

</div>
<div class="controles">
<label for="">etiqueta 02</label>
<input type="text">

</div>
<div class="controles">
<label for="">etiqueta 03</label>
<input type="text">

</div>
</form>



css
Código (css) [Seleccionar]

.controles label, .controles input
{
display:inline-block;
vertical-align:top;
}
.controles input
{
margin-left:30px;
width:250px;
}
.controles label
{
font-family:monospace;
}
legend
{
font-weight:bold;
font-family: monospace;
}


Saludos

<a href ="http://programacionrapido.blogspot.com">Programacion .Net</a>

onStrike