如何避免调整窗口大小或缩放比例时父div内嵌套的菜单项发生移位

问题复现相关素材 #

• 100%屏幕尺寸下显示效果：
• 110%缩放比例下显示效果：

现有CSS代码 #

#menu_nav_item {
    margin-right: 70px;
    font-size: 28px;
}
.menu_nav_item1 {
    display: inline-block;
    margin-top: 15px;
}

现有HTML代码 #

<div  class="col-lg-6" id="menu_buttons">
    <center style="padding-top:150px">
        <div id="menu_container" style="min-width:300px;" >
            <div class="menu_nav_item1"><a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="jump-link" data-feathr-click-track="true">ATTEND</a></div>
            <div class="menu_nav_item1"><a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="jump-link" data-feathr-click-track="true">PROGRAM</a></div>
            <div class="menu_nav_item1"><a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="jump-link" data-feathr-click-track="true">EXPO</a></div>
            <div  class="menu_nav_item1">
                <a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="btn-primary" style="border-radius: 0px!important; padding:20px;" data-feathr-click-track="true"><b>REGISTER NOW</b></a>
            </div>
        </div>
    </center>
</div>

问题描述 #

调高窗口缩放百分比或是缩小屏幕尺寸时，菜单元素会发生移位，需要设置避免该问题。

解决方案 #

问题根因 #

1. 代码存在基础语法错误：同一页面重复使用menu_nav_item作为id，id属性在单页面必须唯一，优先将id选择器调整为类选择器。
2. 布局逻辑不合理：使用inline-block布局菜单项，当容器宽度小于所有菜单项+间距的总宽度时，元素会自动换行移位；固定像素的边距、字号不随容器宽度适配，缩放/缩屏时很容易超出容器宽度。
3. 父容器col-lg-6为Bootstrap响应式类，仅在大屏下占50%宽度，中小屏宽度会动态缩小，而菜单容器仅设置了最小宽度，没有适配宽度变化的布局规则。

具体修改步骤 #

1. 修正重复id问题：将所有HTML元素的id="menu_nav_item"改为class="menu_nav_item"，对应CSS选择器从#menu_nav_item修改为.menu_nav_item。
2. 替换inline-block为Flex弹性布局，实现宽度自适应：

#menu_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px; /* 替代原有的margin-right，自动控制菜单项间距，避免最后一项多余边距 */
    flex-wrap: wrap; /* 宽度不足时允许换行，若不需要换行可改为nowrap，配合overflow-x:auto实现横向滚动 */
    width: 100%;
    min-width: 300px;
}

3. 调整菜单项样式，使用动态单位适配尺寸变化：

.menu_nav_item1 {
    margin-top: 15px;
    /* 删除原有display: inline-block属性 */
}
.menu_nav_item {
    font-size: clamp(18px, 3vw, 28px); /* 字号动态适配：最小18px，最大28px，中间随视口宽度变化 */
    /* 删除原有margin-right: 70px属性，间距已由容器gap控制 */
}

4. 废弃已被HTML标准移除的<center>标签，将其padding-top:150px属性转移到父容器#menu_buttons，同时给#menu_buttons添加text-align: center实现居中效果。

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