Duda dando estilos a formularios

[alyciashape]

No logro conseguir el efecto deseado. Aver si me explico.
Antes yo ponía esto:

Código HTML:

<label>Nombre</label><input type="text" />
<label>Teléfono</label><input type="text" />
 

Y era fácil de ordenar porque hacía algo así:

Código CSS:

form label {
width:150px;
margin-right:10px;
}
 

Y los controles quedaban debidamente ordenados. El problema es que ahora me pasé a XHTML y me empeñé en hacer todo válido y aquí el problema. La sintaxis correcta de los label es:

Código HTML:

<label>Nombre<input type="text" /></label>
<label>Teléfono<input type="text" /></label>
 

Que además es más funcional, porque si pinchas en el nombre de la etiqueta también te marca el campo. Pero de esta forma no logro que queden debidamente alineados. Lo he intentado así:

Código HTML:

<label><span>Nombre</span><input type="text" /></label>
<label><span>Teléfono</span><input type="text" /></label>
 

O también con div en lugar de span. Y dando un ancho a los div/span y no hacen ni caso. Cosa que no entiendo. Como se podrían alinear? porque sino según el texto del label el input empieza más a la izquierda o más a la derecha.

[pzin]

Iniciado por alyciashape

Que además es más funcional, porque si pinchas en el nombre de la etiqueta también te marca el campo.

En realidad da igual donde coloques el input, si fuera de label o dentro. La cosa es que label lleva el atributo for, en donde si le pones como valor el ID del input, entonces pasará eso que dices si pinchas marca el campo. Aunque no sé ahora mismo si esto viene desde XHTML o es cosa de HTML5.

Código HTML:

<label for="nombre>Nombre</label>
<input id="nombre" type="text">
 

En cualquier caso, yo te diría ya que te metes en XHTML, pues meterte con HTML5 que aunque sea un borrador aún, todos los navegadores actuales lo implementan y soportan.

Respecto a la duda de cómo hacer aquello de los span dentro del label, una forma sería hacer algo así:

Código CSS:

label span {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
}
 

[alyciashape]

Muchas gracias bonez. No sabía lo de inline-block ni tampoco lo de for. Me quedo con el inline-block ya que tengo todo así montado y me ha quedado de rechupete jajaja. Muchas gracias.

La verdad es que tengo que ir probando a hacer cosillas con HTML5, creo que para la próxima me meteré a ello.