在导航栏中使用HTML flex/CSS在左侧菜单右侧显示徽标

我试图用flex display编写一个响应性强的水平导航条（见最终项目的附件图片），但我无法将vector徽标缩小到左边。这是我的密码：

HTML:

徽标（img文件）不断将最后一个

（联系人）推离页面右侧。

---

您可以从

ol

中取出徽标并执行类似操作

.menuBar{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
背景：白色；
}
img{
宽度：100px；
高度：自动；
利润率：20px；
}
ol{
显示器：flex；
柔性包装：包装；
列表样式类型：无；
}
李{
填充：5px
}

您可以使用

flex:1li

上的code>

#导航列表{
显示器：flex；
弯曲方向：行；
宽度：95%；
保证金：自动；
填充：0；
}
#导航列表李：第一种类型{
弹性：1；
保证金：0
}
#李海军{
列表样式：无；
边框底部：无；
利润率：1米1米0；
/*最终：*/
空白：nowrap；
}
导航{
宽度：100%；
保证金：自动；
背景：线性渐变（向左，rgba（0,0,0,0.2），rgba（0,0,0,0.5），rgba（0,0,0,0.2），rgba（0,0,0,0.5），rgba（0,0,0,0.2），rgba（0,0,0,0,0.5），rgba（0,0,0,0.2），rgba（0,0,0,0.5），rgba（0,0,0,0.2））底部重复-x；
背景尺寸：100%3px；
背景色：白色；
}

我似乎无法让它工作。有一件事可能会把我搞砸：当屏幕很小（img{display:none}）时，我隐藏了导航栏，当屏幕为桌面调整大小时，我使用媒体查询将其显示为“flex”。（img{display:flex}）。@brandonstiles您应该隐藏第一个li（img也将被隐藏）。是空白把你的东西弄乱了吗？@GCyrillius我就是不明白为什么它不起作用！这里有一个链接，指向我想要的最终产品的样子：我如何才能做到这一点？@brandonstiles有很多css需要处理，也许一个只有菜单和css相关的代码笔就可以了像这样的？

<nav>
    <div class="menuBar">
       <ol id="navList">
         <li><img id="menuLogo" src="img/fullLogo.png"></li>
         <li><a href="index.html">HOME</a></li>
         <li><a href="approach.html">APPROACH</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="portfolio.html">PORTFOLIO</a></li>
         <li><a href="meetUs.html">MEET US</a></li>
         <li><a href="blog.html">BLOG</a></li>
         <li><a href="contact.html">CONTACT</a></li>
       </ol>
    </div>
</nav>

nav{
  width: 100%;
  margin: auto;
  background-color: white;
}

#navList{
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: auto;
  justify-content: space-between;
}

#menuLogo{
  display: flex;
  width: auto;
  height: auto;
  max-width: 150px;
}

#navList li{
  list-style: none;
  border-bottom: none;
}