当我缩小浏览器的大小时，我的导航栏与我的徽标重叠

Question

基本上，当我试图缩小浏览器的大小时，它开始与左侧的徽标元素重叠，导致导航选项变得隐藏。

这是我的标题+导航的HTML：

<header>
<nav>
<a href="index.html"><img src="bitbird.png" class="logo"></a>
<ul class="navlist">
<li class="navitem"><a href="about.html" class="navlink" id="navlink1">Om Bitbird</a></li>
<li class="navitem"><a href="artists.html" class="navlink" id="navlink2">Artister</a></li>
<li class="navitem"><a href="contact.html" class="navlink" id="navlink3">Kontakt</a></li>
<li class="navitem"><a href="topsongs.html" class="navlink" id="navlink4">Topplåtar</a></li>
</ul>
</nav>
</header>

这是我的导航栏的CSS

.navlist {
display: flex;
flex-direction: row;
justify-content: space-around;
height: 100%;
width: 50%;
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.navitem {
height: 100%;
padding: 0;
margin-bottom: auto;
}
.navlink {
display: flex;
text-decoration: none;
color: black;
align-items: center;
padding: 1rem;
}

顺便说一句，收割台的显示设置为柔性。

Answer 1

HTML中存在语义问题。你的标志不应该在标签导航内。这就是它重叠的原因。应该是这样的：

<header> 
<a href="#">
<img src="#">
</a>
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
</header>

此外，我建议您使用BEM来更好地组织类，并在CSS样式中使用*来创建全局样式。最后，对所有内容使用Flexbox或CSS网格，而不是使用float。它的响应能力更强。

以下是具有更好解决方案的代码：

*,
*::before,
*::after{
margin:0;
padding:0;
list-style: none;
text-decoration:none;
}
html{
font-size:100%;
}
body{
box-sizing:border-box;
}
.header{
background-color:red;
display:flex;
justify-content:space-between;
}
.header__nav{
background-color:yellow;
}
.header__nav-list{
display:flex;
}
.header__nav-item{
margin: 0 .5rem 0 2rem;
}

<header class="header">
<a href="#"><img src="#" class="header__logo"></a>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="about.html" class="header__nav-link" id="navlink1">Om Bitbird</a></li>
<li class="header__nav-item"><a href="artists.html" class="header__nav-link" id="navlink2">Artister</a></li>
<li class="header__nav-item"><a href="contact.html" class="header__nav-link" id="navlink3">Kontakt</a></li>
<li class="header__nav-item"><a href="topsongs.html" class="header__nav-link" id="navlink4">Topplåtar</a></li>
</ul>
</nav>
</header>
Here it is the snippet of the code.

我有一些背景色让你更好地想象。你可以稍后擦除。请随意为您使用此代码。希望我确实帮了你。你问的任何问题，我都很乐意帮你。