單行輸入字段對齊

Question

我一直在尋找網絡，但我還沒有找到解決問題的辦法。

這裏是HTML代碼： http://jsfiddle.net/tA7VT/

<p>Enter your name:<br><input type='text' name='name' size='30'></p> 

<p>Your age:<br><input type='text' name='age' size='10'> years old</p> 

<p>Provide your location info:<br> 
<input type='text' name='street' style='padding-left: 10px' size='50' placeholder='Street and house number'><br> 
<input type='text' name='city' style='padding-left: 10px' size='30' placeholder='City or town'> 
<input type='text' name='zip' style='padding-left: 10px' size='11' placeholder='ZIP'></p> 

既不 '11' 和 '12' 的最後size屬性使兩個字段寬度相同的與所述的第一個input。

我試過把所有的字段設置爲div，寬度設置爲100％，但是60％和40％的寬度都不適合。我想知道如何讓第二條線與第一條線的寬度相同？

Answer 1

嘗試在你的風格使用寬度，而不是size

<p>Enter your name:<br><input type='text' name='name' size='30'></p> 

<p>Your age:<br><input type='text' name='age' size='10'> years old</p> 

<p>Provide your location info:<br> 
<input type='text' name='street' style='padding-left: 10px; width: 315px;'placeholder='Street and house number'><br> 
<input type='text' name='city' style='padding-left: 10px; width: 200px;' placeholder='City or town'> 
<input type='text' name='zip' style='padding-left: 10px; width:100px;' placeholder='ZIP'></p>