导航栏布局调试求助：display: inline-block无法实现全屏铺满与logo居中

我来帮你搞定这个导航栏的问题！你的核心需求是让导航栏铺满整个页面宽度，同时中间放置logo，左右两侧的导航链接均匀分布且整体居中。咱们先拆解原代码里的问题，再给出修改后的完整方案：

原代码里的小bug #

首先得先修正HTML里的两个语法错误：

1. 右导航栏的class属性缺了引号：<div class=right-nav-bar> → 应该改成 <div class="right-nav-bar">
2. Logo里的<img>标签没闭合：末尾少了>，修正后是 <img src="Images/Gingerich%20Final%20Logo.jpg" alt="Gingerich Tiling Logo" height="250" width="300">
3. Logo的div里不需要多余的<li>标签，直接放<a>包裹img就好

然后是CSS的布局问题：你用display: inline-block很难实现均匀分布的效果，而且header设置inline-block会导致它只包裹内容，无法铺满页面宽度。改用Flexbox是实现这种"左右分布+中间居中"布局的最佳方案。

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8">
    <title>Gingerich Tiling</title> 
    <link href="main.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<header> 
    <nav class="nav1"> 
        <div class="left-nav-bar"> 
            <ul> 
                <li><a href="#">Home</a></li> 
                <li><a href="#">About Us</a></li> 
                <li><a href="#">Contact Us</a></li> 
            </ul> 
        </div> 
        <div class="logo"> 
            <a href="index.html"><img src="Images/Gingerich%20Final%20Logo.jpg" alt="Gingerich Tiling Logo" height="250" width="300"></a>
        </div> 
        <div class="right-nav-bar"> 
            <ul> 
                <li><a href="#">Tiling</a></li> 
                <li><a href="#">Earthmoving</a></li> 
                <li><a href="#">Septic</a></li> 
            </ul> 
        </div> 
    </nav> 
</header> 
</body> 
</html>

CSS代码 #

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    color: black; 
} 

body { 
    margin-top: 0; /* 去掉页面默认顶部边距，让导航栏贴顶 */
} 

header { 
    width: 100%; /* 强制header铺满整个页面宽度 */
    background-color: #ffffff; /* 给导航栏加个背景色，方便查看效果 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：加个阴影提升层次感 */
} 

.nav1 { 
    display: flex; /* 开启弹性布局 */
    justify-content: space-between; /* 左右导航栏贴向页面两侧，中间logo自动居中 */
    align-items: center; /* 垂直方向居中对齐，让logo和导航链接在同一水平线 */
    padding: 0.5rem 2rem; /* 左右加内边距，避免内容贴到页面边缘 */
} 

nav a { 
    text-decoration: none; 
    font-weight: 500; /* 可选：加粗导航文字 */
} 

nav ul { 
    list-style: none; /* 去掉列表圆点 */
    display: flex; /* 让导航项横向排列 */
    gap: 1.5rem; /* 导航项之间的间距，比margin更直观好用 */
} 

/* 优化logo大小，避免撑高导航栏 */
.logo img { 
    max-height: 80px;
    width: auto; /* 保持图片比例不变 */
}

/* 可选：添加hover交互效果 */
nav a:hover {
    color: #666666;
    text-decoration: underline;
}

关键布局解释 #

1. header设置width: 100%：确保导航栏容器铺满整个页面宽度
2. .nav1的Flex属性：
   • display: flex：把导航栏内部的三个元素（左导航、logo、右导航）变成弹性项目
   • justify-content: space-between：让左导航靠左端，右导航靠右端，中间的logo自动占据剩余空间实现居中
   • align-items: center：让所有元素在垂直方向对齐，避免logo和导航链接高低不一
3. nav ul用flex：快速实现导航项的横向排列，gap属性可以轻松控制项与项之间的间距

内容的提问来源于stack exchange，提问作者Mukafa