CSS標籤文本正下方輸入元素

Question

我有input文本和label標籤。我無法弄清楚CSS讓標籤文本在輸入文本的正下方對齊。這裏是HTML的一個片段：

 

<form id="sg1"> 
    <label for="member1">member 1</label> 
    <input name="member1" id="member1" value="jack" /> 
    <label for="member2">member 2</label> 
    <input name="member2" id="member2" value="carter" /> 
    <label for="member3">member 3</label> 
    <input name="member3" id="member3" value="jackson" /> 
    <label for="member4">member 4</label> 
    <input name="member4" id="member4" value="tielk" />  
</form>​ 
 

好一會：

 
[input box 1] [input box 2] 
     label 1   label 2 

等等，所有的元素。

Answer 1

一個迅速颳起了例子工程：

input { 
 
    display: inline-block; 
 
    width: 6em; 
 
    position: relative; 
 
    top: -3em; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 6em; 
 
    margin-right: .5em; 
 
    padding-top: 1.5em; 
 
}

<form id="sg1"> 
 
    <label>member 1 <input name="member1" id="member1" value="jack" /></label> 
 
    <label>member 2 <input name="member2" id="member2" value="carter" /></label> 
 
    <label>member 3 <input name="member3" id="member3" value="jackson" /></label> 
 
    <label>member 4 <input name="member4" id="member4" value="tielk" /></label> 
 
</form>​

可以改進，但我覺得它比外來div的清潔工，和它會降低比label -after-好得多input -approach當CSS支持不存在時。就個人而言，我更喜歡將input嵌套在label中。

Answer 2

使用一張表（每個單元一個輸入/標籤對）或左浮動div（每個div一個輸入/標籤對）。例如：

<div class="pair"> 
    <input type="text" name="foo" value="bar" /><br /> 
    <label for="foo">shabba</label> 
</div> 
<div class="pair"> 
    … 
</div> 

CSS：

div.pair { 
    float:left; 
} 

Answer 3

您可以使用純CSS來得到這個實現你想要的，但它需要大量的即興定位的東西，你最好不要這樣做。

最簡單的方法是把標籤輸入下面的HTML：

<form id="sg1"> 
    <input name="member1" id="member1" value="jack" /> 
    <label for="member1">member 1</label> 
    <input name="member2" id="member2" value="carter" /> 
    <label for="member2">member 2</label> 
    <input name="member3" id="member3" value="jackson" /> 
    <label for="member3">member 3</label> 
    <input name="member4" id="member4" value="tielk" />  
    <label for="member4">member 4</label> 
</form> 

然後你可以用每個輸入/標籤對與一個div，並設置DIV像這樣：

<form id="sg1"> 
    <div class="wrap"> 
     <input name="member1" id="member1" value="jack" /> 
     <label for="member1">member 1</label> 
    </div> 
    <div class="wrap"> 
     <input name="member2" id="member2" value="carter" /> 
     <label for="member2">member 2</label> 
    </div> 
    <div class="wrap"> 
     <input name="member3" id="member3" value="jackson" /> 
     <label for="member3">member 3</label> 
    </div> 
    <div class="wrap"> 
     <input name="member4" id="member4" value="tielk" />  
     <label for="member4">member 4</label> 
    </div> 
</form> 

#sg1 div 
{ 
    clear: both; 
    float: left; 
} 

接下來，你可以把

#sg1 label 
{ 
    float: right; 
} 

input 
{ 
    display:block; 
} 

Answer 4

你會令工作輕鬆了許多通過，每個輸入/升包裝在這種情況下，每個字段（阿貝爾對）在一個div。