Campos de formulario en línea con etiquetas colocadas en la parte superior

Question

No puedo creer que tenga que preguntar esto, pero estoy en el último minuto.

Estoy tratando de mostrar 2 campos de formulario en línea, pero con la etiqueta para cada campo en la parte superior. En ascii art:

Label 1  Label 2 
--------- --------- 
|  | |  | 
--------- --------- 

Debería ser bastante simple.

<label for=foo>Label 1</label> 
<input type=text name=foo id=foo /> 

<label for=bar>Label 2</label> 
<input type=text name=bar id=bar /> 

Esto me conseguirá:

 ---------   --------- 
Label 1 |  | Label 2 |  | 
     ---------   --------- 

Para obtener las etiquetas en la parte superior de las cajas, agrego pantalla = bloque:

<label for=foo style="display:block">Label 1</label> 
<input type=text name=foo id=foo /> 

<label for=bar style="display:block">Label 2</label> 
<input type=text name=bar id=bar /> 

Después de hacer esto, las etiquetas son donde los quiero, pero los campos del formulario ya no están en línea:

Label 1 
--------- 
|  | 
--------- 

Label 2 
--------- 
|  | 
--------- 

No he podido encontrar una manera de ajustar mi html para que los campos se muestren en línea. ¿Alguien puede ayudar?

Answer 1

pondría cada entrada dentro de un lapso de display:inline-block, así:

<span style="display:inline-block"> 
    <label for=foo style="display:block">Label 1</label> 
    <input type=text name=foo id=foo /> 
</span> 

<span style="display:inline-block"> 
    <label for=bar style="display:block">Label 2</label> 
    <input type=text name=bar id=bar /> 
</span> 

Answer 2

Usted podría encerrar sus entradas en las etiquetas y luego usar CSS:

label{display:inline-block;} 
 
input{display:block;}

<label>Label 1<input type=text name=foo id=foo /></label> 
 
<label>Label 2<input type=text name=bar id=bar /></label>