为啥每个li不能显示一行，问题出在哪？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
margin:0 auto;
}
a{
text-decoration:none;
color:#fff;
}
.nav{
margin:0 auto;
text-align:center;
}
.nav li{
float:left;
margin-left:3px;
display:block;
background:#666;
text-align:center;
list-style:none;
display:block;
padding:10px 30px;
}
#logo{
width:230px;
font-size:20px;
line-height:40px;
background:#fff;
font-weight:bold;
}
#logo a{
color: #333;
}
.top_logo{
display:none;
margin:0 auto;
text-align:center;
background:#F00;
padding:10px 20px 10px 20px;
}
.top_logo a{
color:#000;
font-size:24px;
text-align:center;
}
@media only screen and (min-width:585px) and (max-width: 823px)
{
#logo{
display:none;
}
.top_logo{
display:block;
width:100%;
}
.nav{
width:700px;
}
@media only screen and (max-width:585px){
#logo{
display:none;
}
.top_logo{
display:block;
}
.nav{
width:100%
}
.nav li{
width:100%;
}
}
</style>
</head>
<body>
<ul class="nav">
<div class="top_logo"><a href="#" >慕课网</a>
</div>
<li><a href="#">课程大厅<br />it课程在这</a></li>
<li><a href="#">学习中心<br />javascript</a></li>
<li id="logo"><a href="#" >慕课网</a></li>
<li><a href="#">修改密码<br />css</a></li>
<li><a href="#">关于我们<br />jQuery</a></li>
</ul>
</body>
</html>
