英文:
css display:block property error or behaving differently
问题
我想使用 flexbox 和 block（在小屏幕设备上）制作响应式导航栏。在较大的屏幕上，我正在将 display:flex 应用于 navbar_items 以将它们显示在单行中。但是，在移动视图中，我想将 navbar_items 显示为块级元素，但在媒体查询中，我已选择了 navbar_items 和 menu_active，但它仍然显示为 flex。我希望这对您有意义，如果不清楚，请在下面评论或以可理解的方式编辑问题以供其他人理解。
.navbar {
height: 10vh;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
background: black;
}
.navbar_logo a {
text-decoration: none;
font-size: 35px;
color: white;
}
.navbar_item {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav_link {
list-style: none;
padding: 20px;
}
.nav_link a {
font-size: 16px;
color: white;
text-transform: uppercase;
text-decoration: none;
}
@media(max-width:798px) {
.navbar {
display: block;
}
.navbar_item .menu_active {
display: block;
}
}
<nav class="navbar">
<div class="navbar_logo">
<a href="./index.html">Inspire 2020</a>
</div>
<ul class="navbar_item menu_active">
<li class="nav_link"><a href="#" class="active">Home</a></li>
<li class="nav_link"><a href="#">Events</a></li>
<li class="nav_link"><a href="#">Schedule</a></li>
<li class="nav_link"><a href="#">Contact</a></li>
</ul>
</nav>
英文:
I want to make Responsive Navbar using flexbox and block (in small screen devices). Here I am applying display:flex to navbar_items in larger screens to show them in single line. However I want to display navbar_items as block elements in mobile view but inside my media query, I have selected navbar_items and menu_active but its not displaying me as flex. Its still showing me as flex. I hope it makes sense to you, if its unclear please comments below or edit question for other people in understandable way.
<!-- begin snippet: js hide: false babel: false -->
<!-- language: lang-css -->
.navbar {
height: 10vh;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
background: black;
}
.navbar_logo a {
text-decoration: none;
font-size: 35px;
color: white;
}
.navbar_item {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav_link {
list-style: none;
padding: 20px;
}
.nav_link a {
font-size: 16px;
color: white;
text-transform: uppercase;
text-decoration: none;
}
@media(max-width:798px) {
.navbar {
display: block;
}
.navbar_item .menu_active {
display: block;
}
}
<!-- language: lang-html -->
<nav class="navbar">
<div class="navbar_logo">
<a href="./index.html">Inspire 2020</a>
</div>
<ul class="navbar_item menu_active">
<li class="nav_link"><a href="#" class="active">Home</a></li>
<li class="nav_link"><a href="#">Events</a></li>
<li class="nav_link"><a href="#">Schedule</a></li>
<li class="nav_link"><a href="#">Contact</a></li>
</ul>
</nav>
<!-- end snippet -->
答案1
得分: 2
从.navbar_item中删除.menu_active，无需选择它。
@media(max-width:798px)
{
.navbar li
{
display: block;
color: blue;
}
.navbar_item
{
display: block;
}
}
英文:
remove the .menu_active from .navbar_item no need to select it.
@media(max-width:798px)
{
.navbar li
{
display: block;
color: blue;
}
.navbar_item
{
display: block ;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论