下面是我的代码。我在屏幕左上角显示徽标时遇到问题。
我的主要问题是，尽管我在图像部分输入了正确的文件名，但图像没有显示在屏幕上的任何地方。
如果有人能帮我，我真的很感激！提前谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 33px;
height: 67px;
border-radius: 5px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" id="logo" class="logo"/> </li>
<li><a href="#about">About</a></li>
<li><a href="#pathway">Features</a></li>
<li><a href="#implementation">Download</a></li>
</ul>
</div>
</body>
</html>
您的徽标真的是7x5像素吗？我只是把第一个li项目移到左边，如果imageO.jpg在你的Html的同一路径上，这就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
}
li {
float: right;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 70px;
height: 50px;
border-radius: 5px;
border: 1px black;
}
li:first-child {
float: left;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="imageO.jpg" alt="not found" id="logo" class="logo"/> </li>
<li><a href="#about">About</a></li>
<li><a href="#pathway">Features</a></li>
<li><a href="#implementation">Download</a></li>
</ul>
</div>
</body>
</html>在这里，我用另一种方式做到了这一点：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
width: 100%;
display:flex;
justify-content:flex-end;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
width: 50px;
height: 50px;
border-radius: 5px;
position:fixed;
left:20px;;
}<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<ul>
<li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
<li><a href="#about">About</a></li>
<li><a href="#pathway">Features</a></li>
<li><a href="#implementation">Download</a></li>
</ul>
</div>嗨，希望这支笔能帮助确定徽标的位置，也注意到你有一个关闭的div标签，它没有打开，就像之前的答案一样，我从Ul中取出了徽标，因为因为你浮动了所有的Ul内容，它也拿走了徽标。
https://codepen.io/MoneWebGuru/pen/WNQwVGX`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
border-radius: 0px;
position: fixed;
top: 0;
left:0px;
width: 100%;
}
li {
float: right;
list-style-type: none;
}
#logo {
float: left;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-right: 20px;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #F29078;
border-radius: 5px;
}
.active {
background-color: #F29078;
}
.logo {
border-radius: 5px;
height: 50px;
padding-top:10px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
<div style="width:100%">
<img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" id="logo" class="logo"/> <ul>
<li><a href="#about">About</a></li>
<li><a href="#pathway">Features</a> </li>
<li><a href="#implementation">Download</a></li>
</ul>
</div>
</body>
</html>
`