求助：Logo与导航栏并排显示被遮挡，滚动跟随布局修复

问题核心 #

你的代码存在两个关键问题导致Logo被遮挡、布局异常：

• ul 设置了 position: fixed 和 width: 100%，会脱离文档流独立定位，直接覆盖在Logo上方
• nav 的 width: fit-content 限制了整体导航宽度，导致调整尺寸时要么Logo过大要么导航被压缩

修正后的代码 #

HTML（结构无需改动）

<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 {
    width: 80px;
    margin-right: 20px; /* 增加间距，避免和导航贴紧 */
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* 去掉ul的position: fixed和width: 100%，让它跟随nav的定位 */
    flex-grow: 1; /* 让导航栏占满nav的剩余宽度 */
}

li {
    float: left;
}

li a {
    display: inline-block; /* 替换inline-flex，更适合导航链接布局 */
    color: #ffffff;
    text-align: center;
    padding: 14px 16px; /* 修正拼写错误：ox改成px */
}

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

nav { 
    display: flex; /* 用flex实现并排布局，比inline-flex更稳定 */
    align-items: center; /* 让Logo和导航垂直居中对齐 */
    position: fixed;
    top: 0; /* 调整回顶部，之前的top:25px会让导航下移 */
    width: 100%; /* 让nav占满整个页面宽度 */
    z-index: 1;
    padding: 10px 20px; /* 增加内边距，提升视觉效果 */
    box-sizing: border-box; /* 确保padding不超出宽度 */
    background-color: #5c4033; /* 把背景色移到nav，让整个导航栏统一背景 */
}

/* 链接样式合并简化 */
a:link, a:visited, a:hover, a:active { 
    text-decoration: none; 
}

关键修改说明 #

• 仅给最外层nav设置position: fixed，让内部img和ul都在固定容器内布局，避免层级混乱
• 用Flexbox实现Logo与导航栏的并排对齐，同时保证垂直居中
• 修正li a里的拼写错误（16ox→16px），确保内边距生效
• 将导航背景色移到nav上，让整个顶部导航区域背景统一
• 增加内边距和间距，优化整体视觉体验

内容的提问来源于stack exchange，提问作者Teegan Larcombe-hogan