我需要将网站徽标放在导航栏移动的一侧，但我的代码无法正常工作，缺少什么？

Question

我是编码新手，所以答案可能是显而易见的。我拥有包括徽标在内的所有项目，但是无论我做什么，徽标都会隐藏在导航栏后面。我试图让导航栏和徽标随着用户滚动而在页面上向下移动。因为它确实有效，但它只是让徽标与所有内容保持一致。

img {
    width: 80px;
    display: inline-flex;
}


ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5c4033;
    position: fixed;
    top: 0;
    width: 100%
}



li {
    float: left;
}



li a {
    display: inline-flex;
    padding: 20px;
    text-align: center;
    padding: 14px 16ox;
    color: #ffffff;
    
  }



  li a:hover {
    background-color: #c4a484;
  }



nav { 
  display:inline-flex;
  z-index:1;
  position:fixed;
  top:25px;
  width:fit-content;
  height:44px;
  list-style-type:none;
}




 a:link { 
     text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}

<nav>
    <img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">
    <ul id="navItems">
        <li><a href="default.asp">Home</a></li>
        <li><a href="About.asp">About</a></li>
        <li><a href="Gallery.asp">Gallery</a></li>
        <li><a href="Contact.asp">Contact</a></li>
        <li><a href="Booking.asp">Booking</a></li>
    </ul>
</nav>

一半的 CSS 可能是不需要的。但基本上，这段代码创建了一个导航栏，但徽标隐藏在其后面。我尝试删除 img 部分，但这只会使徽标变得巨大。尝试更改图像和导航的宽度，但这要么改变了图像的大小，要么缩短了导航栏。

Answer 1

这是一个基于您的代码的标准导航栏

.navbar-container {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #5c4033; 
  z-index: 10; 
}

img {
  width: 80px;
  height: auto;
  margin-right: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: calc(100% - 90px); 
  justify-content: space-around;
}

li {
  float: none; 
}

li a {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: #ffffff;
  text-align: center;
}

li a:hover {
  background-color: #c4a484;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

<nav>
  <div class="navbar-container">
    <img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">
    <ul id="navItems">
      <li><a href="default.asp">Home</a></li>
      <li><a href="About.asp">About</a></li>
      <li><a href="Gallery.asp">Gallery</a></li>
      <li><a href="Contact.asp">Contact</a></li>
      <li><a href="Booking.asp">Booking</a></li>
    </ul>
  </div>
</nav>