Question

div中如何将input输入框上下对齐？

如下图所示，我如何将输入框对齐？

<div style="width:500px;"><span>姓名 *</span><input type="text" name="cec_Firstname" value="" required maxlength="20" /></div> <div style="width:500px;"><span>电话 *</span><input type="text" name="cec_Company" value="" required maxlength="20" /></div> <div style="width:500px;"><span>地址 *</span><input type="text" name="cec_Address" value="" required maxlength="100" /></div> <div style="width:500px;"><span>电子邮件 *</span><input type="text" name="cec_email" value="" required maxlength="50" /></div>

Answer 1

设置div属性的高度和行高值一样，加个input{vertical-align:middle;}即可，如果各个浏览器显示不一样，用margin和padding属性微调一下就可以了

Answer 2

最简的方法。用全角的空格，自己排。或者你想要文字右对齐，输入框左对齐

Answer 3

可以在左边的文字外面套一层div（统一宽度,由于地址邮箱最宽，所以这个宽度以这个为好）

Answer 4

<style>
p { height:20px; line-height:20px;}
</style>
<div style="width:100px; float:left ">
<p>姓名：*</p>
<p>电话：*</p>
<p>地址：*</p>
<p>电子邮箱：*</p>
</div>
<div style="width:150px; float:left;">
<p><input type="text" name="cec_Firstname" value="" required maxlength="20" /></p>
<p><input type="text" name="cec_Company" value="" required maxlength="20" /></p>
<p><input type="text" name="cec_Address" value="" required maxlength="100" /></p>
<p><input type="text" name="cec_email" value="" required maxlength="50" /></p>
</div>

Answer 5

用table写 把文字放在左边那列 输入框放在右边那列