input与select对齐问题

     <div>

      <ul>

        <li><span>用户名：</span><input type="text"/></li> 

        <li><span>密码：</span><input type="password"/></li> 

        <li><span>重复密码：</span><input type="password"/></li>

        <li><span>邮箱：</span><input type="text"/></li> 

        <li><span>真实姓名：</span><input type="text"/></li> 

        <li>证件类型：

                              <select>  

                                <option value="身份证">身份证</option> 

                                <option value="驾驶证">驾驶证</option>

                                <option value="军人证">军人证</option>

                              </select>

        </li>

        <li><span>证件号码：</span><input type="text"/></li>

      </ul>  

    </div>

证件类型加上span后导致证件号码后移；不加上span会导致select和input不对齐，求解！
css如下：

span{padding-right:10px;width:5em;display:block;float:left;line-height:26px;}

input,select{vertical-align:middle;}