Question

我的问题是我正在尝试创建响应式菜单，每件事情都很好，之后，我做了什么我隐藏我的菜单并在屏幕小于一定尺寸时显示一个按钮，这很好我的按钮显示，但检查完框后我的菜单没有显示，我试图使用复选框显示菜单，意味着如果选中复选框，则只显示菜单，如果屏幕小于600px，请阅读媒体查询最后一部分，因为这是问题，其余代码工作。请阅读css代码中的注释，

我认为问题出现在css的最后一种风格中，所以请先检查一下，你不必阅读整个代码，我在代码中留下评论，告诉你哪个部分不起作用，

Html代码

<div class="wrapper">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu">
    <nav>

            <ul class="flex-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Plans</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
    </nav>
</div>

Css代码

*{margin:0; padding:0;}

.wrapper  { 
    color:white;
    font-family:Helvetica;
}
nav{background:black}
/*making the button and checkbox invisible
This work fine, 
I try to display it in media query, work fine
it showed up when screen is less than 600px
*/
.show-menu {
    display:none;

}
input[type=checkbox]{
    display:none;
}

/*styling nav bar*/

.flex-nav{
    display:flex;
    list-style-type:none;
}

.flex-nav li{
    flex:1;
    text-align:center;
}

.flex-nav li a {
    display:block;
    padding:20px 0;
    text-decoration:none;
}


/*media query*/
@media screen and (max-width:600px){
    /*displaying the button work fine, also
    read the first comment */
    .show-menu{
    background:#1a1a1a;
    cursor:pointer;
    padding:20px 0;
    display:flex;
    justify-content:center;
    }

    /*saying dont display class flex-nav work fine*/
    .flex-nav{
        display:none;
    }
    /*now saying display flex-nav children if button is 
    click. does not work driving my tiny brain nuts*/
    input[type=checkbox]:checked ~ .flex-nav
    {
        display:block;
    }

}

Answer 1

最后一个CSS选择器（在媒体查询中）应该是

input[type=checkbox]:checked + nav > .flex-nav {
  display:block;
}

原因：input和.flex-nav不是兄弟姐妹。 .flex-nav是nav的孩子，是[{1}}的兄弟，实际上input直接跟随.flex-nav，因此nav

tilda选择器css，标签按钮不适用于响应式菜单

1 个答案: