html - 在我的导航中添加我的 Logo

Question

我目前正在学习网络开发，所以我正在练习一些 html 和 css。我在将 Logo 放在左侧时遇到问题。我希望完成的是这样的: prototype navigation

我的导航栏左侧有一个 Logo ，右侧是我的导航菜单主页、合作伙伴和产品，当屏幕宽度减小时，它们会变成汉堡菜单。

能否请您帮助我或指出一个好的资源来正确完成我的布局？提前谢谢大家。

这是我的 HTML 代码:

.menu {
  margin: 0 30px 0 0;
  background-color: #f8f5f2;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}
.menu a {
  text-decoration: none;
  color:black;
  margin: 0 10px;
  line-height: 70px;
  font-family: playfair-display
}

span {
  color: dodgerblue;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 20px;
  float: right;    
}

#toggle {
  display: none;
}

@media only screen and (max-width: 500px) {
  label{
    display: block;
    cursor: pointer;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    clear: right;
    display: block;
    border-bottom: 1px solid black;
    margin: 0;
  }
  #toggle: checked + .menu {
    display: block;
  }
}

<header>   
  <div class="nav">
      <div id="logo">
      <img src="img/logoblackandred.png" alt="logo">
      </div>
      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle" />
      <div class="menu">
          <a href="#">Home</a>
          <a href="#">Partners</a>
          <a href="#"><span>Products</span></a>
      </div>
  </div>
</header>

Answer 1

尝试

img{
   display:inline;
   width:70px;
   height:50px;
   float:left;
}