Inline-Formularfelder mit Beschriftungen oben

Question

Ich kann nicht glauben, dass ich das fragen muss, aber ich bin am Ende meines Wissens.

Ich versuche, 2 Formularfelder inline anzuzeigen, aber mit der Bezeichnung für jedes Feld an der Spitze. In ascii Kunst:

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

Sollte ziemlich einfach sein.

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

Das wird mir bekommen:

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

Um die Etiketten auf den Boxen, ich hinzufügen Anzeige = Block:

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

Nachdem ich dies zu tun, sind die Etiketten wo ich sie haben will, aber die Formularfelder sind nicht mehr inline:

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

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

Ich konnte keine Möglichkeit finden, meinen HTML-Code zu umbrechen, sodass die Felder inline angezeigt werden. Kann jemand helfen?

Answer 1

ich jeden Eingang setzen würde innerhalb einer Spanne mit display:inline-block, wie folgt aus:

<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

Sie Ihre Eingaben mit den Etiketten einschließen könnte und dann 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>