添加页面内容时导航栏尺寸异常变化的解决求助

问题根源 #

1. HTML标签未正确闭合：你的<ul class="nav-list">和<navbar>标签缺少闭合标签，导致后续添加的<h1>等内容会被错误嵌套进导航栏容器，直接拉长导航栏。
2. 导航栏未设置固定高度：当前导航栏高度完全由内部内容和padding撑开，没有明确的高度限制，容易受布局变化影响。
3. 下拉菜单定位未约束：包含下拉菜单的.nav-item未设置position: relative，下拉菜单的绝对定位可能干扰整体布局。

修复步骤及代码修改 #

1. 修正HTML标签闭合

给<ul>和<navbar>补充闭合标签，确保后续内容处于导航栏外部：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Portfolio Test</title>
</head>
<body>
    <navbar>
        <ul class="nav-list">
            <li class="nav-item">
                Logo</li>
            <li class="nav-item">
                <a href="#">About</a></li>
            <li class="nav-item">
                <a href="#">Portfolio</a>
                    <ul class="nav-item-drop">
                        <li><a href="#">Project 1</a></li>
                        <li><a href="#">Project 2</a></li>
                        <li><a href="#">Project 3</a></li>
                    </ul>
                </li>
            <li class="nav-item">
                <button class="button-primary">Contact</button></li>
        </ul>
    </navbar>
    <!-- 现在添加H1不会被嵌套进导航栏 -->
    <h1>这是页面标题</h1>
</body>
</html>

2. 修改CSS固定导航栏尺寸并约束下拉菜单

• 给.nav-list添加固定高度，确保高度稳定；
• 给包含下拉菜单的.nav-item添加position: relative，让下拉菜单基于该元素定位：

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(164, 164, 164);
}

.nav-list {
    background-color: rgb(0, 0, 0);
    box-shadow: 0px 0px 15px;
    font-family: "Alfa Slab One", sans-serif;
    padding: 0;
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.8rem;
    height: 60px; /* 设置固定高度，可根据需求调整 */
}

.nav-item {
    list-style: none;
    padding-right: 3rem;
    position: relative; /* 约束下拉菜单的定位基准 */
}

.nav-item:hover ul, .nav-item:focus ul {
    opacity: 1;
    visibility: visible;
}

.nav-item-drop {
    color: rgba(234, 211, 78, 0.6);
    background-color: black;
    position: absolute;
    top: 100%; /* 从父元素底部开始定位 */
    left: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-in-out;
}

.nav-item a {
    text-decoration: none;
    color: rgba(234, 211, 78, 0.6);
}

.nav-item a:hover {
    color:white;
}

.nav-item:first-child {
    margin-right: auto;
    margin-left: 20px;
    font-size: 2rem;
    color: rgba(234, 211, 78, 0.6);
}

.button-primary {
    font-family: "Alfa Slab One", sans-serif;
    padding: .3rem .6rem;
    background-color: rgba(234, 211, 78, 0.6);
    color: black;
}

.button-primary:hover {
    cursor: pointer;
    color: black;
    background-color: rgba(253, 199, 3, 0.95);
}

额外说明 #

• 若不想用固定高度，也可以用min-height替代height，保证导航栏不会小于指定高度，同时允许内部内容撑开（但固定高度更能保证尺寸稳定）；
• 调整下拉菜单的top: 100%和left: 0，让它精准定位在父列表项的下方，避免位置偏移。

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