Javascript 如何在导航栏最左侧放置图像徽标？

我目前正在为一个测试网页创建一个导航栏，我在对齐网站的徽标时遇到问题，该徽标是一个图像。我是CSS的初学者，所以有人能给我一些关于如何安排徽标的提示吗

另外，这个代码还没有完成，所以不要介意列表部分，只是徽标部分

谢谢

页眉页脚-Kayelah缝合









@导入url（'https://fonts.googleapis.com/css2?family=Playfair+显示&Display=swap'）；
@导入url（'https://fonts.googleapis.com/css2?family=Open+SAN:wght@300&显示=交换'；
*{
保证金：0；
填充：0；
颜色：黑色；
框大小：边框框；
字体系列：“开放式Sans”，无衬线；
}
#标志{
弹性基准：20%；
字号：0；
}
#标志img{
高度：自动；
宽度：自动；
最大高度：40%；
最大宽度：40%；
溢出：隐藏；
}
导航{
背景：白色；
填充：10px 40px 10px 70px；
边框：1px实心#B0B1AE；
左边界：无；
边界权：无；
}
导航ul{
显示器：flex；
列表样式：换行；
对齐项目：居中；
证明内容：中心；
}

您可以这样尝试。您必须更改

nav

和

nav-ul

上的两个CSS属性

更改

导航后

：

 nav{
    background: white;
    padding: 10px 40px 10px 0;
    border: 1px solid #B0B1AE;
    border-left: none;
    border-right: none;
 }

这里左边的填充覆盖了代码左边的70px。我做到了0

和

导航ul

：

nav ul{
     display: flex;
     list-style: wrap;
     align-items: center;
 }

---

已删除

对齐内容

以将元素置于最左侧位置。

我已删除

对齐内容：居中nav div

css选择器中选择code>，这样您的图像实际上可以位于右侧。或者您可以使用

位置：绝对

以下是最终代码：


*{
保证金：0；
填充：0；
颜色：黑色；
框大小：边框框；
字体系列：“开放式Sans”，无衬线；
}
导航{
背景：白色；
填充：10px 40px 10px 70px；
边框：1px实心#B0B1AE；
左边界：无；
边界权：无；
}
导航ul{
显示器：flex；
列表样式：换行；
对齐项目：居中；
/*证明内容：中心*/
}
#标志{
弹性基准：20%；
字号：0；
}
#标志img{
高度：自动；
宽度：自动；
最大宽度：40%；
溢出：隐藏；
}










您不应该将
放在
内
在哪里？请将其移除，使其水平对齐。让我再补充一次