如何在CSS的导航栏中添加徽标？

Question

好了经过大量的谷歌搜索后，我终于找到了如何将导航栏中间的菜单链接居中。之后我遇到了另一个问题......在导航栏中添加了一个徽标。 我的问题是，徽标没有进入导航栏，而是高于栏。 我想在导航栏中将徽标浮动到左侧。 我尝试了一些方法，包括将display: inline-block/inline添加到所有主要元素，但没有区别。虽然我尝试将display: inline添加到nav ul，但导航栏的背景消失了（请参阅第二张图片），我无法通过添加高度和宽度来添加背景。

P.s对不起如果业余失误很少，我几个月前才开始编码。

谢谢你的时间！

导航栏现在的样子：

导航栏在display: inline;

中的显示方式

这是我的HTML和CSS：

#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}

<nav>
  <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
  <ul>
    <li><a href="">Game 1</a>
    </li>
    <li><a href="">Game 2</a>
    </li>
    <li><a href="">Game 3</a>
    </li>
  </ul>
</nav>

Answer 1

只需将其插入ul。

即可

#logo {
  height: 50px;
  width: auto;
  float: left;
}
nav ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  text-align: center;
  border: 1px solid #e7e7e7;
  display: inline-block;
  width: 100%;
}
nav li {
  display: inline-block;
}
nav a {
  display: inline-block;
  padding: 16px 15px;
  text-decoration: none;
  font-family: arial;
  font-weight: bold;
  color: white;
}
nav a:hover {
  background-color: orange;
  color: white;
}

<nav>
  <ul>
    <img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
    <li><a href="">Game 1</a>
    </li>
    <li><a href="">Game 2</a>
    </li>
    <li><a href="">Game 3</a>
    </li>
  </ul>
</nav>

Answer 2

最简单的方法是做position:absolute https://jsfiddle.net/fj1r6b1e/

#logo {
  height: 50px;
  width: auto;
  position:absolute;
}

另外，img标记应该写成<img src="..." />而不是 <img></img>

Answer 3

提供徽标img position: fixed。这不会影响菜单项的位置/居中。

https://jsfiddle.net/kjmm3du5/