我正在尝试在纯 html/css 中创建一个导航栏,其宽度小于 600px 是水平的,带有一组水平内联链接(无元素符号点)。在宽度超过 600px 时,我想要一个带有垂直列表的垂直导航栏。
但是,我的水平版本一直给我一个带有元素符号点的垂直堆叠集,而当我想要它在下面时,我的垂直版本有内联“段落”的“链接”一词。
我错了,看不出我做错了什么。我尝试清除它并重新开始,直到我输入我的媒体查询并且一切都出错了。任何帮助表示赞赏。
<header>
<nav id="navbar">
<h1>HTML Basics</h1>
<ul>
<li>Documents</li>
<li>Headings</li>
<li>Paragraph</li>
<li>Links</li>
<li>Images</li>
</ul>
</nav>
</header>
#navbar{
background: red;
width: 100%;
height: 20%;
margin: auto;
position: fixed;
display: inline;
float: top;
top: 0;
left: 0;
}
@media screen and (min-width:600px){
#navbar{
background: red;
width: 22%;
height: 100%;
margin: auto;
position: fixed;
display: block;
top: 0;
left: 0;
}
li{
list-style: none;
padding-right: 20px;
padding-bottom: 20px;
display: inline-block;
margin-left: 10%;
float: left;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
@media only screen and (min-width:600px){
li{
list-style-type: none;
display: block;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 20px;
}
}
li:hover{
color:#911f32;
font-size: 18px;
}
最佳答案
您在第一个媒体查询中缺少右大括号。试试这个:
#navbar {
background: red;
width: 100%;
height: 20%;
margin: auto;
position: fixed;
display: inline;
float: top;
top: 0;
left: 0;
}
@media screen and (min-width:600px) {
#navbar {
background: red;
width: 22%;
height: 100%;
margin: auto;
position: fixed;
display: block;
top: 0;
left: 0;
} // <-- NOTE! This curly brace was missing...
}
li {
list-style: none;
padding-right: 20px;
padding-bottom: 20px;
display: inline-block;
margin-left: 10%;
float: left;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
@media only screen and (min-width:600px){
li {
list-style-type: none;
display: block;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 20px;
}
}
li:hover{
color: #911f32;
font-size: 18px;
}
关于html - 为什么我的导航栏对齐水平和垂直媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59600777/