在导航菜单旁边或中间添加徽标并为导航菜单创建圆角答案

【问题标题】：adding logo next to nav menu or in middle and creating round corners for the nav menu在导航菜单旁边或中间添加徽标并为导航菜单创建圆角
【发布时间】：2020-08-06 13:22:36
【问题描述】：

您好，我需要帮助将我的徽标放在导航菜单列表之间。它可以是主页、画廊、徽标图像、关于、联系人...我看过一个 youtube 视频，但它不起作用...我还会尝试将徽标放在导航菜单栏的一侧，但这没有用，所以如果有人可以帮助我为这两个选项提供代码，这将是很好的，并为导航栏圆角。我关注了视频，但它不起作用。我不知道我做错了什么或错过了什么。 1. 在导航栏列表（主页、图库、徽标图像、关于、联系人）之间放置徽标图像的代码 2. 代码标志图像浮动在导航栏左侧。 3. 为导航栏做圆角..

【问题讨论】：

标签： html css css-float navigationbar

【解决方案1】：

body {
  margin: 0;
  padding: 0;
  font-family: Arial; /* Change to any font you need */
}

nav {
  background-color: blue;
}

nav .nav-items {
  align-items: center;
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

nav .nav-items a {
  color: white;
  margin: 0 25px;
  padding: 15px;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

nav .nav-items a:hover {
  background-color: darkblue;
}

nav .nav-items .logo {
  height: 35px;
  width: auto;
  margin: 0 25px;
}

<nav>

  <div class="nav-items">
    <a href="/">Home</a>
    <a href="/gallery">Gallery</a>
    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png">
    <a href="/help">Help</a>
    <a href="/contact">Contact</a>
  </div>

</nav>

【讨论】：

【解决方案2】：

.nav {
  background: blue;
  height: 80px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}
.nav logo{
  width: 50px;
  flex: 0 0 20%;
}
.nav .menus {
  flex: 0 0 80%;
}
.nav .menus ul {
  display: flex;
  list-style: none;
  align-items: center;
}
.nav .menus ul li {
  flex-grow: 1;
}
.nav img {
  width: 50px;
}

<div class="nav">
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png" />
  </div>
  <div class="menus">
    <ul>
      <li>Home</li>
      <li>Gallery</li>
      <li>
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png" >
      </li>
      <li>Help</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

【讨论】：