Question

我正在尝试创建一个带有下拉菜单的导航栏。

我希望 HOME，灯具，结果，排行榜位于同一行。我希望即将来临的月份，是 FIXTURES 的下拉子级，而 GOALS，ASSISTS 是 LEADERBOARD的子级。 / strong>尽管我已将 display：inline 属性应用于第一级li标签，但是RESULTS和 LEADERBOARD 位于不同的行。是什么原因造成的，我该如何纠正？

<!DOCTYPE html> <html> <head> <style> .wrap{ text-align: center; background-color: black; margin: 0px; padding: 10px; } .wrap>ul>li{ list-style: none; display: inline; padding: 40px; } .drop li{ list-style: none; } .wrap ul li a{ text-decoration: none; font-size: 20px; color:white; } </style> </head> <body> <div class="wrap"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Fixtures</a></li> <ul class="drop"> <li><a href="#">Upcoming Week</a></li> <li><a href="#">Month</a></li> </ul> <li><a href="#">Results</a></li> <li><a href="#">Leaderboard</a></li> <ul class="drop"> <li><a href="#">Goals</a></li> <li><a href="#">Assists</a></li> </ul> </ul> </div> </body> </html>

Answer 1

这是您想要的效果吗？

.wrap {
  text-align: center;
  background-color: black;
  margin: 0px;
  padding: 10px;
}

ul {
  padding: 0;
  margin: 0;
}

.wrap>ul {
  display: flex;
  justify-content: space-between;
}

.wrap>ul>li {
  list-style: none;
  display: inline;
}

.drop li {
  list-style: none;
}

.wrap ul li a {
  text-decoration: none;
  font-size: 20px;
  color: white;
}

<div class="wrap">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Fixtures</a>
      <ul class="drop">
        <li><a href="#">Upcoming Week</a></li>
        <li><a href="#">Month</a></li>
      </ul>
    </li>
    <li><a href="#">Results</a></li>
    <li>
      <a href="#">Leaderboard</a>
      <ul class="drop">
        <li><a href="#">Goals</a></li>
        <li><a href="#">Assists</a></li>
      </ul>
    </li>
  </ul>
</div>

对导航栏的怀疑

1 个答案: