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

[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

[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] Expandir


<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] Expandir


.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

[onStrike]

Crack ^