CODEWITHSUNDEEP
htmlcss
nomicos
nomicos

Reputation: 65

Single-line input fields align

I have been searching the net, but I haven't found a solution to the problem.

Here is HTML code: 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>

Neither '11' nor '12' for last size attribute make two fields' width same with the very first input.

I've tried to put all the field to div with width set as 100%, but then 60% and 40% don't fit, as well. I would like to know how can I make that second line to have the same width with first one?

Upvotes: 0

Views: 96

Answers (1)

popdan
popdan

Reputation: 471

try using width in your style as opposed to 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>

Upvotes: 1

Related Questions