将徽标放入CSS导航栏中

Question

我想知道如何在css导航栏中放置徽标，因为我不知道如何在css导航栏中放置徽标。我对如何将徽标放入CSS导航栏中一无所知，因此，如果你们中的一位能帮助我，那将非常好。

body {
  margin: 0px;
}

ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0px auto;
  background: #222;
  padding: 0px;
}

li {
  float: right;
  font-size: 20px;
}

li a {
  text-decoration: none;
  color: white;
  padding: 20px 20px;
  display: block;
  text-align: center;
}

ul li a:hover {
  border-bottom: 3px solid grey;
  padding-bottom: 17px;
}

img {
  height: 70px;
}

<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Home</a></li>
</ul>

Answer 1

您需要做的第一件事是创建一个柱状结构并将背景作为父级。然后将徽标添加到左侧，然后在右侧添加链接。最好的方法是使用<header>和<nav>标签，因为它们确实是语义。

这里您可能会发现有用的东西：

body {
  margin: 0px;
}

/* Add these */
header {
  overflow: hidden;
  background: #666;
}

header h1 {
  float: left;
  padding: 0 20px;
}

header nav {
  float: right;
  padding: 20px 0 0;
}
/* End Add these */

ul {
  list-style-type: none;
  overflow: hidden;
  margin: 0px auto;
  padding: 0px;
}

li {
  float: left;  /* Changed here. */
  font-size: 20px;
}

li a {
  text-decoration: none;
  color: white;
  padding: 20px 20px;
  display: block;
  text-align: center;
}

ul li a:hover {
  border-bottom: 3px solid grey;
  padding-bottom: 17px;
}

img {
  height: 70px;
}

<header>
  <h1>
    <img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
  </h1>
  <nav>
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</header>

此外，我刚刚将背景颜色从#222更改为#666，以保持网页安全并同时使徽标可见。随时更改它。

预览

Answer 2

这是一个小提琴，我希望它将帮助您使您走上正确的轨道；

https://jsfiddle.net/Lyrw49mj/7/

HTML

<ul>
 <li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li> 
 <li><a href="#">Contact</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Home</a></li>
</ul>

CSS

 body {
  margin: 0px;
 }

ul {
 list-style-type: none;
 overflow: hidden;
 margin: 0px auto;
 background: #222;
 padding: 0px;
}

li {
 float: right;
 font-size: 20px;
}

li a {
 text-decoration: none;
 color: white;
 padding: 20px 20px;
 display: block;
 text-align: center;
}

ul li a:hover {
 border-bottom: 3px solid grey;
 padding-bottom: 17px;
}

.NavHeader a img{
 position: relative;
 top: 0px;
 left: 0px;
 height: 70px;
 width: auto;
}

.NavHeader a:hover{
 border-bottom: none;
 padding-bottom: 20px;
}