在这里请原谅我，因为我还在学习如何完整地编写代码。我正在尝试写一个代码，在桌面上，将显示一个导航条在屏幕的右侧。但是，当显示在小于800px的东西上时，我希望它显示为列而不是行。但是，每当我尝试设置时，它只显示在一行中，不会变成低于800px的列形式。感谢所有的帮助！
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Education</a>
<a href="#">Resume</a>
<a href="#">Contact</a>
</nav>
</div>
</body>
</html>
CSS
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
@media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
}
}
您需要将a标记从默认的inline-block转换为block
null
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
@media(max-width:800px){
body {
background: #135e46;
}
div {
background: #73a788;
flex-direction: column;
display: flex;
font-size: 1em;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
padding: 20px;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
display:block /* added this rule */
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Education</a>
<a href="#">Resume</a>
<a href="#">Contact</a>
</nav>
</div>
</body>
</html>
您需要将display:flex和flex-direction:column添加到nav元素中，以便在列中显示a元素。
因此，如果您的div只有一个子项，那么看到任何更改都是正常的，除非您查看主轴（https://developer.mozilla.org/en-us/docs/web/css/flex-direction）
https://developer.mozilla.org/en-us/docs/web/css/flex
如果您有在媒体查询之外定义的属性，则不需要重写它们。媒体查询只是一个依赖于媒体的排序覆盖系统。（通常为屏幕大小）
null
body {
background: #135e46;
}
div {
background: #73a788;
display: flex;
justify-content: flex-end;
padding: 20px;
font-size: 1em;
flex-direction: row;
}
a {
color: #e9d0bd;
text-decoration: none;
font-size: 1.2em;
margin: 10px;
}
@media(max-width:800px){
body {
background: #135e46;
}
div {
flex-direction: column;
display: flex;
align-items: center;
margin-top: -10px;
max-width: 100%;
overflow-x: hidden;
}
nav{
display:flex;
flex-direction:column;
}
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
Title
</title>
<link rel="stylesheet" href="items/styles.css">
</head>
<body>
<div>
<nav>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">Education</a>
<a href="#">Resume</a>
<a href="#">Contact</a>
</nav>
</div>
</body>
</html>