為啥每個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>
2016-09-22
我看了你的代碼沒有問題，
@media?only?screen?and?(min-width:585px)?and?(max-width:?823px) ?????????{ #logo{ display:none; }估計是這個地方排版問題，大括號要緊挨著小括號
@media?only?screen?and?(min-width:585px)?and?(max-width:?823px){ #logo{ display:none; }