我的纳维尔(Navbar(是我的链接。我正在尝试设置媒体查询，其中链接堆栈和中心点击了我的汉堡菜单，使用Primine CSS Flex-Box。我需要更改我的代码才能实现这一目标？
i首先使用浮点，绝对和相对定位。此时，我的Navbar工作几乎完美地工作。但是，我不得不将链接与其href =" home"一起放置，在div中带有"选项"，以便在我的屏幕尺寸接近媒体查询后保持可见。此后，我的链接的定位变得尴尬，因此我转向CSS Flex-Box。
<html>
<div>
<nav class="navbar">
<label class="menu" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="main"><li class="home"><a href="home">TechReality</a></li></div>
<div class="options">
<li class="news"><a href="news"></a></li>
<li class="products"><a href="productstats">Categories</a></li>
<li class="trends"><a href="trending">Trending</a></li>
<li class="forum"><a href="reading">Customer Forum</a></li>
<li class="about"><a href="aboutus"></a>About Us</li>
</div>
</div>
</nav>
@media only screen and (max-width: 1135px) {
.navbar .options .home{
visibility: visible;
}
.menu {
display: block;
cursor: pointer;
}
.navbar.options{
text-align: center;
visibility: hidden;
flex-basis: 100%;
flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.1);
margin: 0;
}
ul:last-of-type a {
border-bottom: none;
}
#toggle:checked + .options {
visibility: visible;
}
}
我的完整代码可以在此Codepen片段https://codepen.io/ashu121805/full/xvgrqp。
这里有很多要讨论的内容，但是我想指出三个主要问题，这些问题将带您90％的方式，然后您可以在以后看到适合的样式。
1。修复无效的html
您在<nav class="navbar">内部有一个无关紧要的div标签，应删除。您还具有div内部的li标签，这是不正确的；li应该始终是ol或ul的孩子。修复这些，并从上图的开头删除额外的html打开标签，我们得到：
<div>
<nav class="navbar">
<label class="menu" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<ul class="main">
<li class="home"><a href="home">TechReality</a></li>
</ul>
<ul class="options">
<li class="news"><a href="news"></a></li>
<li class="products"><a href="productstats">Categories</a></li>
<li class="trends"><a href="trending">Trending</a></li>
<li class="forum"><a href="reading">Customer Forum</a></li>
<li class="about"><a href="aboutus"></a>About Us</li>
</ul>
</nav>
</div>
(另外，只需注意：在Codepen中，您不需要包括html或body标签，也不需要包括head部分。您还可以删除拥有的script标签，只需在编辑器视图中使用JS面板。(
2。使汉堡菜单起作用
这个非常容易修复。现在，您正在使用此规则切换菜单的可见性：
#toggle:checked + .options {
visibility: visible;
}
问题是， +选择器仅选择 ext emall e元素的blosbl。由于.options在#toggle之后不正确，因此选择器不起作用。
相反，您可以使用~选择器，该选择器将在匹配选择器的元素之后选择 all siblings：
#toggle:checked ~ .options {
visibility: visible;
}
3。基本CSS清理
一旦到达这么远，单击汉堡包时就会有一个菜单可以切换，但看起来很奇怪。我们需要做一些主要的事情：
- 使我们的列表(
ul(实际上看起来不像列表。 - 使链接堆叠在垂直上。
- 将链接定位在逻辑位置，就像屏幕左侧的导航栏下方一样。
＆＃35; 1可以简单地完成：
ul {
list-style: none;
padding-left: 0;
}
＆＃35; 2可以通过添加这些其他样式来完成：
.navbar .options {
flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
width: 100%;
}
还要注意，您目前在媒体查询样式中有错别字 - .navbar .options中应该有一个空间，您当前没有。
＆＃35; 3更参与其中，但是一个好的开始是在媒体查询中添加这些样式：
/* force .options to wrap below since it has flex-basis: 100% */
.navbar {
flex-wrap: wrap;
}
/* remove the default margin-bottom on lists – or you could do this in your main styles above your media query */
.navbar .options,
.main {
margin-bottom: 0;
}
从那里您可以根据自己的喜好调整事物。