我创建了一个菜单栏，我试图使其美观并使文本正确对齐，但a标记与前一个标记重叠。我尝试的是将一个选择器优先于另一个选择器。具有CCD_ 2。所以基本上我希望导航栏看起来像我的网站，但我希望按钮是可点击的，并且网站上的按钮不会重叠。如果你在Desktop上查看我网站的早期版本，我想你可以更好地理解我的问题，因为我糟糕的英语写作技能。
网站
和一些代码
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a {
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
width: 100%;
margin: 0;
}
nav ul li a:hover {
background-color: inherit;
position: absolute;
}<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/about.html">About</a></li>
<li><a href="../pages/contact.html">Contact</a></li>
<li><a href="../pages/login.html">Login</a></li>
</ul>替换此：
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<li><a href="../index.html">Home</a></li>
<li><a href="../pages/about.html">About</a></li>
<li><a href="../pages/contact.html">Contact</a></li>
<li><a href="../pages/login.html">Login</a></li>
</ul>
发件人：
<ul class="ShowDesk HideDesk menull" id="nav">
<li id="exit" class="exit-btn HideDesk"><img src="../images/cancel-button.svg" alt="toggle menu"></li>
<a href="../index.html"><li>Home</li></a>
<a href="../pages/about.html"><li>About</li></a>
<a href="../pages/contact.html"><li>Contact</li></a>
<a href="../pages/login.html"><li>Login</li></a>
</ul>
基本上，您需要做的是将li标记或div标记包装在锚点标记中。通过这样做，可点击按钮将自动占据正确的位置。
希望你会觉得这个有用。
如果我很理解你，你想这样做：
HTML
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Login</a>
</nav>
<div class="">
Rest of website
</div>
CSS
nav{
text-align: right;
}
nav a{
margin: 0 2%;
text-decoration: none;
color: black;
}
如果有帮助的话，我会很高兴的。
我最终所做的是将标题部分放入另一个名为navbar-container的容器中，这样我就可以将导航栏的样式与其他容器分开。在不干扰其他代码的情况下增大宽度。(无论如何，我不知道这是否是一种正确的编码方式。(我设计了导航栏：
.navbar-container {
text-align: center;
padding: 0.8em 1.2em;
}
/* and removing the width: 100% from here; */
}
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
align-items: right;
}
nav ul li a{
color: black;
background-color: inherit;
padding: 1em 2em;
text-align: right;
margin: 0;
}
nav ul li a:hover {
color: black;
background-color: inherit;
}