html - 徽标与导航链接不在同一行

Question

制作了一个带有标题菜单的网站，当我转到移动版本时，它会变为汉堡菜单。

汉堡菜单效果很好，但是当我在标题菜单（桌面视图）中时，徽标与导航链接不在同一行，而且看起来并不吸引人。

我可以通过将“logo-container”类放在“导航”之外来解决，但是汉堡菜单不能很好地工作（因为将 logo-container 放到导航 div 中解决了另一个问题）。

.logo-container,.nav-links,.calendar {
  display: flex;
}

.logo-container {
  flex: 1;
  position: relative;
  left: 5%;
}

.logo {
  font-weight: 400;
  margin: 5px;

}

.logo-container img{
  max-width: 120px;
  max-height: 120px;
}

/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }

nav {
  flex: 2;
}
.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-link {
  color: var(--clr-dark);
  font-size:20px;
  text-decoration: none;
  font-weight: 600;
}

<header class="header" id="myHeader">
        
  <nav role="navigation">
    
    <div class="logo-container" id="myLogo"> 
      <a href="#"><img src="./img/logo.png"  alt="logo"/> </a>
    </div>

    <div class="hamburger" id="hamburgerID">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    
    <ul class="nav-links">
      <li><a class="nav-link" href="#details">DETAILS</a></li>
      <li><a  class="nav-link" href="#description">DESCRIPTION</a></li>
      <li><a   class="nav-link" href="#aboutus">ABOUT US</a></li>
    </ul>
    
  </nav>
</header>

标签： htmlcssmenuheader

Answer 1

您可以使用嵌套的 flexbox。编辑后的代码在评论中解释。

.logo-container,
.nav-links,
.calendar {
  display: flex;
}

.logo-container {
  position: relative;
  left: 5%;
}

.logo {
  font-weight: 400;
  margin: 5px;
}

.logo-container img {
  max-width: 120px;
  max-height: 120px;
}


/* Logo container JS*/

.logo-container {
  display: 'none'
}

.logo-container.open {
  display: 'block'
}

nav {
  flex: 2;
  display: flex; /* Make nav a flexbox container */
}

.nav-links {
  justify-content: space-around;
  list-style: none;
  flex: 1; /* Let it occupy rest of the container */
  align-items: center; /* Align to the vertical center because logo is bigger. */
}

.nav-link {
  color: var(--clr-dark);
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
}

<header class="header" id="myHeader">

  <nav role="navigation">

    <div class="logo-container" id="myLogo">
      <a href="#"><img src="http://placehold.it/120x120" alt="logo" /> </a>
    </div>

    <div class="hamburger" id="hamburgerID">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <ul class="nav-links">
      <li><a class="nav-link" href="#details">DETAILS</a></li>
      <li><a class="nav-link" href="#description">DESCRIPTION</a></li>
      <li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
    </ul>

  </nav>
</header>