Question

我正在编写一个我在练习中找到的设计，并试图将徽标放在导航栏的中心，就像在运球链接中一样。

https://dribbble.com/shots/4424634-MIFESTIVAL-Home-Page/attachments/1005722

左边有4个项目，右边只有两个。我最初把它们全部漂浮在左边并且无法弄明白，所以我尝试了flexbox，因为我找到了这个提示：https://stackoverflow.com/a/21862333/7723283

仅当我在导航中包含大量项目时才有效。我也想知道我是否可以包括所有这些项目作为普通导航而不是按钮或其他东西。这个css与上面的链接基本相同，所以我的导航项目都是平等的。但我需要在中心的标志。我觉得有很多东西可以用flexbox轻松完成，但这是我第一次使用它。

nav{
  display:flex;
  width:100%;
  height:20%;
  background:#eee;
  align-items:center;
  justify-content:center;
}

nav a {
  text-decoration:none;
  color:black;
  margin: 0 30px;
}

#logo{
  width: 200px;
  height:100%;
  background:rgb(126, 232, 163);
}

<nav>
   <a href="#">Menu icon</a></li>
   <a href="#">Search icon</a></li>
   <a href="plan.html">Plan Your Trip</a></li>
   <a href="experience.html">Experience</a></li>
   <a href="index.html" id="logo">mifestival</a></li>
   <a href="tickets.html">Tickets</a></li>
   <a href="line-up.html">Line-Up</a></li>
</nav>

Answer 1

这是一个非常简单的重组，可以帮助您入门：

我们会将菜单块分成三个不同的部分（左侧，中间/徽标，右侧）

<nav>
    <div class="leftSide">
        <a href="#">Menu icon</a>
        <a href="#">Search icon</a>
        <a href="plan.html">Plan Your Trip</a>
        <a href="experience.html">Experience</a>
    </div>
    <div class="logo">
        <a href="index.html" id="logo">mifestival</a>
    </div>
    <div class="rightSide">
        <a href="tickets.html">Tickets</a>
        <a href="line-up.html">Line-Up</a>
    </div>
</nav>

对于我们将添加的CSS：

.leftSide {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}
.rightSide {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}

如何将徽标置于导航栏中心，每侧的菜单项数量不均匀？

1 个答案: