我刚开始进行网络开发，并使用徽标和导航栏制作了一个简单的网站标题。问题是该网站应该响应并更改布局（将其调整为580px）显示两列中的菜单，但事实并非如此。同样，当网站完全扩展时，应该在一行显示菜单，但它也是混乱的。你能看看代码并告诉我有什么问题吗？
干得好：
HTML：
<!DOCTYPE html>
<html lange="en">
<head>
<meta charset="utf-8" />
<title>Painting with responsive menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel = "stylesheet"
type = "text/css"
href = "stylesheet6.css" />
</head>
<body>
<div class="wrapper">
<header>
<a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/paintinglogo.png"></a>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
CSS：
.wrapper{
margin: 0 auto;
max-width: 1220px;
width: 98%;
background-color: #2F3038;
padding: 2%;
border-radius: 2px;
}
header{
width: 98%;
min-height: 100px;
padding: 5px;
margin-bottom: -40px;
text-align: center;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
nav {
width: 90%;
margin: 5% auto;
overflow: hidden;
}
nav ul{
list-style: none;
overflow: hidden;
}
nav ul li a {
background-color: #737373;
border: 1px solid #2F3038;
color: #2F3038;
display: block;
float: left;
font: 16px, Arial, Helvitica;
padding: 10px;
text-align: center;
text-decoration: none;
width: 16.5%;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
nav li a:hover{
background: #DADADA;
}
/*-------------------Media Queries------------*/
@media only screen and (max-width: 580px){
nav li a{
width: 50%;
font: 13px Arial, Helvitica;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #2F3038;
}
nav li:nth-child(even) a{
border-right: none;
}
}
多谢你们 ！
你有几个错误：
box-sizing: border-box给你错误的宽度计算nav ul li a因为宽度16.5％不包括填充因此强制换行 *
{
box-sizing: border-box;
}
.wrapper{
margin: 0 auto;
max-width: 1220px;
width: 98%;
background-color: #2F3038;
padding: 2%;
border-radius: 2px;
}
header{
width: 98%;
min-height: 100px;
padding: 5px;
margin-bottom: -40px;
text-align: center;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
nav {
width: 90%;
margin: 5% auto;
overflow: hidden;
}
nav ul{
list-style: none;
overflow: hidden;
padding-left: 0;
display: flex;
flex-wrap: wrap;
}
nav ul li
{
flex: 1 1 0;
display: block;
}
nav ul li a {
background-color: #737373;
border: 1px solid #2F3038;
color: #2F3038;
display: block;
font: 16px, Arial, Helvitica;
padding: 10px;
text-align: center;
text-decoration: none;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
nav li a:hover{
background: #DADADA;
}
@media only screen and (max-width: 580px){
nav ul li
{
flex: 0 0 33.333333%;
}
nav li a{
font: 13px Arial, Helvitica;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #2F3038;
}
nav li:nth-child(even) a{
border-right: none;
}
}
@media only screen and (max-width: 325px){
nav ul li
{
flex: 0 0 50%;
}
}