Question

尝试将我的导航菜单与我的徽标图像垂直对齐，但使用导航栏的代码似乎甚至不在容器元素中。任何特定错误或是多件事？

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

我不确定，但您可以尝试插入图片源代码行nav-right类，因为我没有看到nav-logo类的css代码，否则编写nav-logo类的代码

.nav-logo {
display: inline-block;
vertical-align: right;
max-width:100%; // or your desired size
}

Answer 3

为.nav-logo{}添加新的css规则 display：inline; ;

工作代码：https://codepen.io/Omi236/pen/YQdKZY

Answer 4

无论这是否是最佳做法，您只需将float: left;添加到header .container .nav-logo

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

https://jsfiddle.net/vu8y4uxa/

或按照其他地方的建议使用display：inline-block;

Answer 5

对float: right;使用nav-right并不难，但您忘记将float: left;用于nav-logo课程。这将解决它！

Answer 6

您可以尝试以下代码：

/* 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;//Add this
}

li {
  list-style: none;
}

nav.nav-right {
  min-width: 737.667px;
  /*width: 737.667px;*///Remove this
  /*float: right;*///Remove this
}

.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">
    <nav class="nav-right">
      <div class="nav-logo"><!--Move this-->
        <img src="site_logo.png" alt="Site Logo" />
      </div>
      <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 7

一个选项是使用flexbox，这也可以节省一些CSS编码。有关浏览器兼容性，请查看here。建议的代码不会从IE11开始提出任何问题。

.container {
  display: flex;
  align-items: center;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}

ul li {
  padding: 1em;
  text-transform: uppercase;
  font-family: sans-serif;
}

ul li a {
  text-decoration: none;
  color: black;
}

<header>
  <div class="container">
    <div class="nav-logo">
      <img src="http://placehold.it/100&text=LOGO" 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>

导航菜单不会与徽标图像

7 个答案: