一个div 嵌套一个表单 里面是个列表，红色的是span

Question

对它进行样式设置
<ul>
<li><span>用户名：</span><input id="nickname" name="user.nickname" type="text" /></li>
<li><span>密码：</span><input id="password" name="user.password" type="password"/></li>
<li><span>确认密码：</span><input id="repass" type="password"/></li>
<li><span>性别：</span><input id="sex" name="user.sex" type="radio" value="1" checked />男  <input name="user.sex" type="radio" value="0"/>女</li>
<li><span>出生日期：</span><input id="birthday" name="user.birthday" type="text" readonly /></li>
<li><span>电子邮箱：</span><input id="email" name="user.account" type="text"/></li>
</ul>
#register{
background-color:#b6fee2;
position:relative;
margin:0 auto;
width:600px;
text-align: left;
}
#register form{
font-size: 14px;
}
#register form ul{
list-style-type: none;
}
#register form ul li{
margin:0;
padding:0;
vertical-align:middle;
height:30px;
line-height: 8px;
}
#register form ul li span{
float:left;
width:80px;
border:1px solid red;
}
出现如图的问题，请问怎么解决，谢谢

Answer 1

#register{
background-color:#b6fee2;/*这句是设置整个的背景的css ,把这句不要就没有背景了*/

#register form ul li span{
。
。
border:1px solid red;/*把这句不要就没有红色的边框了！！！！*/
}

Answer 2

height:30px;
line-height: 8px;

改为：
height:30px;
line-height: 30px;

如果还不行
加如下css：

#register *{vertical-align:middle}