html - 导航菜单不会与 Logo 图像垂直对齐

Question

尝试将我的导航菜单与我的 Logo 图像垂直对齐，但使用我拥有的代码，导航栏似乎甚至不在容器元素内。有任何具体错误还是多方面的错误？

/* Body styles */

body {
  background-color: white;
  margin: 0px;
  width: 100%;
  min-width: 1000px;
  max-width: 1400px;
}


/* Header styles */

header {
  background-color: white;
  min-height: 140px;
  height: 160px;
}

header img {
  display: inline-block;
  clear: left;
  margin: 0;
}


/* Navigation list styles */

header .container {
  margin: auto;
  width: 1140px;
  min-height: inherit;
  height: inherit;
}

header .container .nav-logo {
  min-height: inherit;
  height: inherit;
  width: 188px;
  padding-top: 35px;
}

li {
  list-style: none;
}

nav.nav-right {
  min-width: 737.667px;
  width: 737.667px;
  float: right;
}

.nav-right ul {
  display: inline-block;
  margin-left: 40px;
  padding: 0px;
  vertical-align: top;
}

.nav-right li {
  display: inline;
  text-transform: uppercase;
  font-family: sans-serif;
}

.nav-right li a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 5px 10px;
}

.nav-right li a:hover {
  outline: 1px black solid;
  margin: 0px;
}

<header>
  <div class="container">
    <div class="nav-logo">
      <img src="site_logo.png" alt="Site Logo" />
    </div>
    <nav class="nav-right">
      <ul>
        <li><a href=# alt="menu">Menu</a></li>
        <li><a href=# alt="locations">Locations</a></li>
        <li><a href=# alt="nutrition">Nutrition</a></li>
        <li><a href=# alt="our 
                        story">Our Story</a></li>
        <li><a href=# alt="rewards">Rewards</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 1

您需要将 display: inline-block 添加到您的 header .container .nav-logo

/* Body styles */

body {
  background-color: white;
  margin: 0px;
  width: 100%;
  min-width: 1000px;
  max-width: 1400px;
}


/* Header styles */

header {
  background-color: white;
  min-height: 140px;
  height: 160px;
}

header img {
  display: inline-block;
  clear: left;
  margin: 0;
}


/* Navigation list styles */

header .container {
  margin: auto;
  width: 1140px;
  min-height: inherit;
  height: inherit;
}

header .container .nav-logo {
  min-height: inherit;
  height: inherit;
  width: 188px;
  padding-top: 35px;
  display: inline-block;
}

li {
  list-style: none;
}

nav.nav-right {
  min-width: 737.667px;
  width: 737.667px;
  float: right;
}

.nav-right ul {
  display: inline-block;
  margin-left: 40px;
  padding: 0px;
  vertical-align: top;
}

.nav-right li {
  display: inline;
  text-transform: uppercase;
  font-family: sans-serif;
}

.nav-right li a {
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 5px 10px;
}

.nav-right li a:hover {
  outline: 1px black solid;
  margin: 0px;
}

<header>
  <div class="container">
    <div class="nav-logo">
      <img src="site_logo.png" alt="Site Logo" />
    </div>
    <nav class="nav-right">
      <ul>
        <li><a href=# alt="menu">Menu</a></li>
        <li><a href=# alt="locations">Locations</a></li>
        <li><a href=# alt="nutrition">Nutrition</a></li>
        <li><a href=# alt="our story">Our Story</a></li>
        <li><a href=# alt="rewards">Rewards</a></li>
      </ul>
    </nav>
  </div>
</header>