2013-05-17 80 views
3

我這裏有一個例子:http://jsfiddle.net/3zSbt/對齊表單輸入框?

我不知道我怎麼會連我的輸入框海誓山盟......

任何幫助將不勝感激。

HTML

<div id="contactContent"> 
<form> 
Email: <input type="text" name="firstName"> 
<br> 
Subject: <input type="text" name="lastName"> 
</form> 
</div> 

CSS

#contactContent { margin-top: 50px; margin-left: 300px;} 
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;} 
+2

有很多方法。這是一個[示例](http://jsfiddle.net/3zSbt/1/)。 – Vucko

+0

無論如何,只要它看起來像你的榜樣一樣適合我。你應該讓它成爲答案,以便我可以檢查它。 :) – Zevoxa

回答

12

有很多方法。一種方法是將的價值名稱放入label。例如:

HTML

<label>Email:</label><input type="text" name="firstName" /> 
<br /> 
<label>Subject:</label><input type="text" name="lastName" /> 

CSS

label{ 
    display:inline-block; 
    width:100px; 
} 

JSFiddle

+1

我會在6分鐘內接受,但非常感謝。 – Zevoxa

+0

您的歡迎:) – Vucko

2

如果你想使用HTML,你可以嘗試把它放在一個表,或者如果你只是想用CSS你嘗試這個;

input { 
    display:inline-block; 
    float:left; 
} 
+0

正試圖避免使用表。 – Zevoxa

+0

夠公平的,但希望CSS是你的解決方案。 –