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

Question

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

<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

所有的span都加个文中我给的style肯定行

<p><span style="display:inline-block;width:200px;text-align:right;">廉颇:</span> <input type="text" name="" id="" value="" /></p>
<p><span style="display:inline-block;width:200px;text-align:right;">蔺相如: </span> <input type="text" name="" id="" value="" /></p>
<p><span style="display:inline-block;width:200px;text-align:right;">霍去病:</span> <input type="text" name="" id="" value="" /></p>
<p><span style="display:inline-block;width:200px;text-align:right;">纳兰容若: </span> <input type="text" name="" id="" value="" /></p>
<p><span style="display:inline-block;width:200px;text-align:right;">阿骨打:</span> <input type="text" name="" id="" value="" /></p>
<p><span style="display:inline-block;width:200px;text-align:right;">耶律豹齐: </span> <input type="text" name="" id="" value="" /></p>
复制代码到编辑器中可看到效果

Answer 2

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

只要给span一个固定宽度就可以了，当然要把span设置为块儿级元素。

Answer 3

第一个方法就是，span标签增加样式display：inline-block；可以给个宽度，文字靠右，右侧就会一致，
第二个方法就是，输入文字的格式转换成中文全角，在两个字的中间敲两个空格就行……，希望有用

Answer 4

在姓名加中文空格，像这样：姓 &‘nbsp&’nbsp名。不够可以加多几个。电话住址同理。
去掉单引号，因为知道打不出来自动转为空格

Answer 5

把前面三个输入框前面的文字中间加两个空格符号（ ），像这样 <div style="width:500px;"><span>姓  名 *</span><input type="text" name="cec_Firstname" value="" required maxlength="20" /></div>，最方便了