CSS 菜单对齐问题

Question

我创建了一个 CSS 导航栏，它分为三个部分：
1.Left (.logo 是 class 放在左边)
2.Center (.menu 是另一个 class 并且放在了中间)
3.Right (.menu2 是最后一个 class 并且 我无法正确放置在右边)

我想要这样的东西，我怎样才能完成这个任务：

.logo {
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}
nav{
 position: fixed;
 width: 100%;
 background-color: #000;
}
/*Menu 1*/
nav .menu ul{
 list-style-type: none;
 overflow: hidden;
 color: #fff;
 padding: 0;
 text-align: center;
 margin:0;
 transition: 2s;
}
nav .menu ul li{
 display: inline-block;
 padding: 16px 8px;
}
nav .menu ul li a{
 text-decoration: none;
 color: #fff;
 font-size: 20px;
}
/*Menu 2*/
nav .menu2 ul{
 list-style-type: none;
 overflow: hidden;
 color: #fff;
 padding: 0;
 text-align: right;
 margin:0;
 transition: 2s;
}
nav .menu2 ul li{
 display: inline-block;
 padding: 16px 8px;
}
nav .menu2 ul li a{
 text-decoration: none;
 color: #fff;
 font-size: 20px;
}

<nav>
 <div class="logo">
  LOGO
 </div>
 <div class="menu">
  <ul>
   <li><a href="#">Menu1</a></li>
   <li><a href="#">Menu1</a></li>
  </ul>
 </div>
 <div class="menu2">
  <ul>
   <li><a href="#">menu2</a></li>
   <li><a href="#">menu2</a></li>
  </ul>
 </div>
</nav><!----- nav ------>

Answer 1

您可以将 menu2 放在 HTML 中的 Menu1 之前，然后给出 .menu2 right: 0; 和 position: absolute;：

nav{
 position: fixed;
 width: 100%;
 background-color: #000;
}
.logo {
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}
/*Menu 1*/
nav .menu ul{
 list-style-type: none;
 overflow: hidden;
 color: #fff;
 padding: 0;
 text-align: center;
 margin:0;
 transition: 2s;
}
nav .menu ul li{
 display: inline-block;
 padding: 16px 8px;
}
nav .menu ul li a{
 text-decoration: none;
 color: #fff;
 font-size: 20px;
}
/*Menu 2*/
nav .menu2 {
  right: 0;
  position: absolute;
}
nav .menu2 ul{
 list-style-type: none;
 overflow: hidden;
 color: #fff;
 padding: 0;
 text-align: right;
 margin:0;
 transition: 2s;
}
nav .menu2 ul li{
 display: inline-block;
 padding: 16px 8px;
}
nav .menu2 ul li a{
 text-decoration: none;
 color: #fff;
 font-size: 20px;
}

<nav>
 <div class="logo">
  LOGO
 </div>
 <div class="menu2">
  <ul>
   <li><a href="#">menu2</a></li>
   <li><a href="#">menu2</a></li>
  </ul>
 </div>
 <div class="menu">
  <ul>
   <li><a href="#">Menu1</a></li>
   <li><a href="#">Menu1</a></li>
  </ul>
 </div>
</nav><!----- nav ------>

CSS 菜单对齐问题

CSS menu alignent issue

css

nav