Campi modulo inline con etichette posizionate in cima

Question

Non posso credere di doverlo chiedere, ma sono alla fine del mio spirito.

Sto provando a visualizzare 2 campi modulo in linea, ma con l'etichetta per ogni campo in alto. In ascii art:

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

Dovrebbe essere piuttosto semplice.

<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 /> 

Questo otterrà me:

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

Per ottenere le etichette sulla parte superiore delle scatole, aggiungo display = blocco:

<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 /> 

Dopo faccio questo, le etichette sono dove li voglio, ma i campi del modulo non sono più in linea:

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

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

Non riesco a trovare un modo per avvolgere il mio html in modo che i campi vengano visualizzati in linea. Qualcuno può aiutare?

Answer 1

vorrei mettere ogni ingresso all'interno di un arco con display:inline-block, in questo modo:

<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

Si potrebbe racchiudere gli ingressi con le etichette e poi usare i 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>