如何在與輸入字段相關的位置標記標籤

，這裏是我的html

<form> 
    <p><label for="comp-name">Name:</label> 
     <input type="text" name="comp-name"></input> 
    </p> 
    <p> 
     <label for="company-address">Address:</label> 
     <textarea name="company-address"></textarea> 
    </p> 
    <p> 
     <label for="postcode">Postcode:</label> 
     <input type="text" name="postcode"></input> 
    </p> 
    <p> 
     <label for="phone">Phone Number:</label> 
     <input type="text" name="phone"></input> 
    </p> 
    <p> 
     <label for="email">Email:</label> 
     <input type="text" name="email"></input> 
    </p> 
</form>

這裏就是我想要的形狀看起來像： enter image description here

here is the jsfiddle link.

有很難搞清楚如何把標籤上的頂輸入/ textarea的左側部分。

來源

2013-04-22 Saint Dee

你沒有保存您的提琴所以其空。有你的嘗試使用行高？ – cernunnos 2013-04-22 14:26:13

這與您的問題無關，但'label'標籤與'id'屬性一起使用，而不是'name'屬性。因此，使用此代碼，點擊標籤將不起作用，除非您添加ID。 – 2013-04-22 14:32:51

jsfiddle保存。 @AurélienGrimpard，謝謝，但現在我只是在標籤的外觀和位置之後 – 2013-04-22 14:34:36

如果我理解正確的，一個簡單的：

label { 
    vertical-align: top; 
}

應該給你你想要的結果。

小提琴：http://jsfiddle.net/N7e67/2/

來源

2013-04-22 14:43:19 cernunnos

您可以使用此代碼對你的定位對象： 風格= 「的z-index：1;左：-3px;頂：202px;位置：絕對;高度：132px;寬度：494px」

根據表單設計更改左側，頂部，高度和寬度。

<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>

來源

2013-04-22 14:31:24

您可以嘗試使用此樣板http://www.csskarma.com/lab/contactForm/或本教程http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/

PS：對於您的信息，標籤for屬性應該引用輸入的id。
PPS：你可能會發現本文有趣http://www.lukew.com/ff/entry.asp?1502

來源

2013-04-22 14:35:07 clark

嘗試把你的拉布勒和輸入型div標籤

<p><div><label for="comp-name">Company Name:</label></div> 
    <div> <input type="text" name="comp-name"></input></div> 
</p>

這應該幫助你的內心。如果這不符合你的期望，請詳細說明你想看到什麼。

來源

2013-04-22 14:41:19

你可以把一個表的左欄中的標籤和領域中的權利，那麼其細胞內進行擺放

<table> 
    <tr> 
     <td>(label)</td> 
     <td>(input)</td> 
    </tr> 
    ... 
</table>

來源

2013-04-22 14:52:50 jbangerter

如何在與輸入字段相關的位置標記標籤

回答

相關問題