如何实现垂直导航栏链接hover时向左偏移的效果？

问题根源分析 #

1. 布局属性冲突：.nav-container同时使用display: flex和float: right，float会被flex布局忽略，导致sticky定位的上下文混乱。
2. 无基准padding：.nav-button:hover直接添加padding-left，没有默认padding作为基准，hover时元素宽度变化，挤压其他li导致整体移动。
3. sticky未生效：sticky定位需要设置top属性才能触发固定效果，原代码未设置。

修复步骤及代码修改 #

修改后的HTML（结构无需调整）

<div class="nav-container">
    <nav>
        <ul>
            <li class="nav-button"><a href="#"><span class="nav-num">01.</span> About</a></li>
            <li class="nav-button"><a href="#"><span class="nav-num">02.</span> Experience</a></li>
            <li class="nav-button"><a href="#"><span class="nav-num">03.</span> Work</a></li>
            <li class="nav-button"><a href="#"><span class="nav-num">04.</span> Contact</a></li>
        </ul>
    </nav>
</div>

修改后的CSS

/* 重置默认样式，消除浏览器自带padding/margin干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav-container {
    position: sticky;
    top: 0; /* 必须设置top值，sticky才会生效 */
    margin-right: 6rem;
    float: right; /* 改用float实现右对齐，避免与flex冲突 */
    border-right: 1px grey solid;
    padding-right: 1.5rem;
}

.nav-container ul {
    list-style: none;
}

.nav-container a {
    text-decoration: none;
    font-family: Menlo;
    font-size: 0.7rem;
    color: #CCD6F6;
    display: block; /* 让a标签占满li宽度，扩大hover触发区域 */
}

.nav-num {
    color: #6683FC;
}

.nav-button {
    line-height: 5rem; /* 将行高放在单个li上，精准控制链接高度 */
    padding-left: 0; /* 设置默认padding作为偏移基准 */
    transition: padding-left 1s linear; /* 把过渡效果放在常态样式，确保移入移出都有动画 */
}

.nav-button:hover {
    padding-left: 1rem; /* 基于默认值调整偏移，避免元素宽度变化导致整体移动 */
}

关键修改说明 #

• 修复sticky定位：添加top: 0触发固定效果，移除冲突的display: flex，改用float: right实现右对齐。
• 避免整体移动：给.nav-button设置默认padding-left，hover时仅调整该值，元素总宽度不变，不会挤压其他链接。
• 优化动画体验：将transition放在常态样式中，确保鼠标移入移出都有平滑过渡。
• 布局重置：全局样式重置消除浏览器默认样式的干扰，避免意外的padding/margin影响布局。

内容的提问来源于stack exchange，提问作者Kal-Toh