Labels y campos de formulario en la misma línea

En ocasiones, es más útil mostrar todos los campos del formulario con su <label> alineada a la izquierda y el campo del formulario a la derecha de cada <label>, como muestra la siguiente imagen:

Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta.

Sin embargo, sí que es necesario añadir un nuevo elemento (por ejemplo un <div>) que encierre a cada uno de los campos del formulario (<label> y <input>). El esquema de la solución propuesta es el siguiente:

El código HTML y CSS para el ejemplo anterior es el siguiente:

div {
margin: .4em 0;
}
label {
width: 25%;
float: left;
}

<form>
<fieldset>
<legend>Alta en el servicio</legend>
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
</div>

<div>
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="35" />
</div>

...
</fieldset>
</form>


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO