Question

我创建了一个菜单栏，我试图让它变得漂亮并正确对齐文本，但 a 标签与前一个重叠，我尝试过将一个选择器置于另一个选择器之上。与z-index。所以基本上我希望导航栏看起来像我的网站，但我希望按钮可以点击并且不会相互重叠。如果你在桌面上查看我网站的早期版本，我认为你可以更好地理解我的问题，因为我的英语写作能力很差。

Website

和一些代码

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>

Answer 1

如果我理解你的话，你想让它变成这样：

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;
}

如果有帮助，我会很高兴。

Answer 2

我最终做的是将标题部分放入一个名为 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;
        
    }

Answer 3

替换这个：

<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 标签包裹在锚标签内。通过这样做，可点击的按钮将自动占据正确的位置。

希望你会觉得这很有用。

有没有一种方法可以让一个菜单按钮优先于另一个？

3 个答案: