柔性方向：列；不在@media样式规则中工作
在这里请原谅我，因为我还在学习如何完整地编写代码。我正在尝试写一个代码，在桌面上，将显示一个导航条在屏幕的右侧。但是，当显示在小于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;
}
}
共有2个答案
您需要将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>
您需要将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>-
在这里请原谅我，因为我还在学习如何完整地编写代码。我正在尝试写一个代码，在桌面上，将显示一个导航条在屏幕的右侧。但是，当显示在小于800px的东西上时，我希望它显示为列而不是行。但是，每当我尝试设置时，它只显示在一行中，不会变成低于800px的列形式。感谢所有的帮助！ HTML CSS
-
问题内容： 跨浏览器的支持似乎有所不同。 检查链接] Firefox：黑底白字。 Opera，Chrome，IE9：蓝色，黑色文字。 哪个是正确的，我将如何使其一致？ 编码 有趣的是，似乎在条件中嵌套媒体查询似乎确实有效。 例如： Index.html importer.css media.css 问题答案： 对于那些只是寻找“哪些浏览器支持@media规则嵌套？”答案的人，简短的答案是所有现
-
样式规则是CSS的基本单位，每个样式规则由选择器（selector）和声明块（declaration block）两个基本部分构成。 选择器决定为哪些元素应用样式，声明块定义相应的样式。声明块包裹在一对花括号中。声明块由一条或多条声明（declaration）组成，每条声明由一个属性和一个值组成，属性和值之间用冒号隔开。属性是希望设置的样式属性，每个属性有一个值。 具体来讲，一个样式规则由选择器、
-
任何关于这个或者如何使用drools api修改drools规则的想法都将是有用的。 注意：我不想为修改规则做字符串替换。
-
我正在把一些业务规则放入drool工程中。我们不能使用KIE工作区UI来编写规则。所以这是出局了。 我的问题是我无法使这个工作。代码运行良好，但我无法看到drl文件被写入。在调试模式下，我可以看到具有正确drl结构的字符串对象。以前有人遇到过这个问题吗？ 我在github上看到了一些例子，人们已经完成了在spring Boot中集成drools的yoman工作。我可以从构建我的服务开始，但我需要确
-
我有一个列有几个项目的垂直列表。每个项目都是用FlexBox制作的两列布局。左列具有固定的宽度。右列包含任意文本，应占用所有可用空间。 当窗口变窄时，我仍然想要一个两列布局。在这里，第二列应该变小，里面的文本应该换行。 当窗口变得更窄时（第二列的大小与第一列大致相同），我希望第二列移动到第一列的下面。 我只是给第一列一个固定的宽度，并在容器上放置。问题是，当右列中的文本超过一行时，flex-wra