HTML+CSS导航栏三栏对齐与响应式适配开发问题求助

问题根源 #

原有flex导航栏未做子区块宽度分配，混用浮动属性，左右内边距不统一，导致中间菜单无法实现真正的视口居中，同时缺少移动端适配逻辑，还存在HTML标签未闭合、样式重复冗余的问题。

修复逻辑 #

• 导航栏分为三个等宽flex子区块：左侧logo区、中间导航区、右侧导航区，三个区块设置相同的flex: 1属性平分导航栏宽度
• 左侧区块内容左对齐，右侧区块内容右对齐，使用相同的左右内边距保证留白一致
• 中间区块内容水平居中，不受左右侧内容长度影响，始终处于导航栏绝对中心位置
• 适配小屏幕显示，移动端自动切换为汉堡菜单，避免导航项挤压换行
• 清理冗余浮动、重复样式，补全未闭合的HTML标签

修正后完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <title>Live like legends</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <nav class="navbar">
        <!-- 移动端汉堡按钮 -->
        <input type="checkbox" id="check"> 
        <label for="check" class="menu-btn">
            <i class="fas fa-bars"></i>
        </label>

        <!-- 左侧logo区 -->
        <div class="nav-left">
            <div class="logo">
                <img src="./veebipilt.png" width="128" height="56">
            </div>
        </div>

        <!-- 中间导航区 -->
        <ul class="nav-center">
            <li><a href="#">Beginning</a></li>
            <li><a href="#">About me</a></li>
            <li><a href="#">Statistics</a></li>
        </ul>

        <!-- 右侧导航区 -->
        <ul class="nav-right">
            <li><a href="#">Objectives</a></li>
            <li><a class="special" href="#">Contact</a></li>
        </ul>   
    </nav>

    <!-- 首屏区域 -->
    <section class="home">      
        <div class="rida">
            <div class="tekstall">
                <h1>Tere tulemast minu lehele!</h1>
                <p>siia tuleb veel midagi lahedat veel ei tea</p>
            </div>
            <div class="piltnext">
                <img src="./12345.jpg" width="500" height="300">
            </div>
        </div>
    </section>

    <!-- 关于我区域 -->
    <section class="about">
        <div class="tekstabout">
            <h1><mark>Veidi</mark> minust</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="javakood.js"></script>
</body>
</html>

CSS代码 #

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

.navbar{
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
}

/* 三个导航区块等宽分配 */
.nav-left, .nav-center, .nav-right{
    flex: 1;
    display: flex;
    align-items: center;
}
.nav-left{
    justify-content: flex-start;
}
.nav-center{
    justify-content: center;
    gap: 40px;
    list-style: none;
}
.nav-right{
    justify-content: flex-end;
    gap: 40px;
    list-style: none;
}

/* 导航链接统一样式 */
.navbar a{
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 3px;
    transition: .5s;
}
.navbar a:hover, a.special{
    background-color: paleturquoise;
}

/* 移动端汉堡按钮默认隐藏 */
#check, .menu-btn{
    display: none;
    font-size: 24px;
    color: blueviolet;
    cursor: pointer;
}

.home{
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
    padding-top: 100px;
}

p{
    color: floralwhite;
}

.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.tekstall{
    flex: 1;
    min-width: 300px;
    margin-left: 20px;
    padding-left: 30px;
}

.piltnext{
    max-width: 100%;
    padding: 20px;
    height: auto;
}
.piltnext img{
    max-width: 100%;
    height: auto;
}

/* 移动端响应式适配 屏幕宽度小于768px时生效 */
@media (max-width: 768px){
    .menu-btn{
        display: block;
        position: absolute;
        right: 30px;
        top: 25px;
    }
    .nav-center, .nav-right{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #cbcca3;
        flex-direction: column;
        padding: 20px 0;
        gap: 20px;
        display: none;
    }
    /* 复选框选中时显示菜单 */
    #check:checked ~ .nav-center, #check:checked ~ .nav-right{
        display: flex;
    }
    .nav-right{
        top: calc(100% + 180px);
    }
    .nav-left{
        flex: none;
    }
}

关键改动说明 #

• 对齐逻辑：三个等宽flex区块彻底解决中间菜单偏移问题，左右内边距统一设为30px，留白完全对称，不管logo和右侧菜单宽度如何变化，中间三个导航项始终在视口水平正中心
• 样式精简：合并了原有两个菜单重复的链接样式，删掉了flex布局下无效的float、冗余margin/padding设置，代码体积更小
• 响应式适配：屏幕宽度小于768px时，横向导航自动折叠，点击右上角汉堡图标即可展开全部导航项，首屏内容区域自动换行，图片自适应屏幕宽度，不会出现横向滚动条
• 规范修复：补全了原代码中未闭合的<p>、<section>标签，把脚本引用放到了页面底部符合加载逻辑，修正了原HTML注释的语法错误

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