如何在 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。这不会影响菜单项的position/centering。

https://jsfiddle.net/kjmm3du5/

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

How do I add a logo into the nav bar in CSS?

css

nav

navbar