標籤放在頂部的內聯表格字段

Question

我不敢相信我不得不問這個，但我在我的智慧結束。

我試圖顯示2個表單字段內聯，但與頂部的每個字段的標籤。在ASCII藝術：

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

應該很簡單。

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

這將讓我：

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

要獲得關於盒頂部的標籤，我想補充顯示=塊：

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

我這樣做之後，標籤我想要它們，但表單域不再是內聯：

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

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

我一直無法找到一種方法來包裝我的html，所以這些字段顯示內聯。誰能幫忙？

Answer 1

我會把每一個輸入的範圍內與display:inline-block，就像這樣：

<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

你可以在標籤附上您的輸入，然後使用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>