html - 单行输入字段对齐

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>

last 属性的 '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>