我的导航没有响应，徽标比导航高

Question

我在PSD文件中进行导航：

https://imgur.com/a/OEbJDAX

但是在我的html / css代码中，该导航看起来像这样：

https://imgur.com/a/1OlW3eW

您会看到徽标比导航更高，如果我要减小尺寸，则这种导航不会做出响应

我试图更改容器，在CSS中进行了弯曲。但这没有帮助。

HTML：

   <header>
        <div class="container">
        <nav id="main-nav">
            <ul class="menu">
                <li><a href="#">Tour</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Pricing</a></li>
            </ul>
            <h2 class="logo">NEWPROVIDENCE</h2>
            <ul class="menu">
                <li><a href="#">Help</a></li>
                <li><a href="#">Contact</a></li>
                <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
            </ul>
        </nav>
        </div>
        </header>

CSS：

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    overflow: hidden;
}

header {
    background: url('../img/bg-header.png') no-repeat center center / cover;
    height: 100vh;
}

#main-nav {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

#main-nav ul {
    display: flex;
    list-style: none;
    align-items: center;
}

#main-nav ul li a {
    padding: 0.75rem;
    font-size: 16px;
    margin: 0 0.25rem;
    color: #26272d;
}

#main-nav ul li a:hover {
    color: #bebebf;
}


.apple {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 20px;
    color: #fff;
    background: #267df4;

}

.apple i {
    margin-right: 10px;
}

Answer 1

尝试将徽标和所有导航链接添加到1 ul列表中，而不要使用2个列表。像这样：

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

#main-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}

<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

对于响应部分，请尝试使用一些媒体查询。建议您将徽标添加到列表的顶部，并在移动屏幕上仅显示顶部徽标，在宽屏上仅显示中间徽标。例如：

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

#main-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}

/* ADDED CSS */

.hidden {
  display: none;
}

@media (max-width: 680px) {
  .logo.mobile {
    display: block;
  }
  .logo.desktop {
    display: none;
  }
  ul.menu li {
    display: block;
  }
}

<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li class="logo mobile hidden">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo desktop">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

最后，要使菜单链接很好地位于桌面设备屏幕的左侧和右侧，同时保持徽标居中，您可以为菜单使用css网格。结果请参见以下示例：

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  overflow: hidden;
}

header {
  background: url('../img/bg-header.png') no-repeat center center / cover;
  height: 100vh;
}

#main-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}


/* Changed to grid */

#main-nav ul {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
  width: 100%;
  list-style: none;
  align-items: center;
  text-align: center;
}


/**/

#main-nav ul li a {
  padding: 0.75rem;
  font-size: 16px;
  margin: 0 0.25rem;
  color: #26272d;
}

#main-nav ul li a:hover {
  color: #bebebf;
}

.apple {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  color: #fff;
  background: #267df4;
}

.apple i {
  margin-right: 10px;
}


/* ADDED CSS */

.hidden {
  display: none;
}

@media (max-width: 680px) {
  .logo.mobile {
    display: block;
  }
  .logo.desktop {
    display: none;
  }
  #main-nav ul {
    grid-template-columns: 100%;
  }
  ul.menu li {
    display: block;
  }
}

<header>
  <div class="container">
    <nav id="main-nav">
      <ul class="menu">
        <li class="logo mobile hidden">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Tour</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
        <li class="logo desktop">
          <h2>NEWPROVIDENCE</h2>
        </li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
        <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
      </ul>
    </nav>
  </div>
</header>

Answer 2

在标签处，只需给出style =“ height：something of percent例如：20％；宽度：以一定百分比