本文详解如何在 `flex: 1` 均分布局的按钮组下，将绝对定位的指示条（`.selected-button`）垂直对齐于选中按钮底部，并实现 150ms 缓动滑动效果。核心在于利用百分比定位 + `transform` 居中 + css 过渡。
在响应式导航栏中，常需为等宽按钮（如 “For You” 和 “Following”）添加一个底部高亮指示条。由于按钮使用 flex: 1 均分父容器宽度，其实际像素宽度不可预知，因此不能依赖固定 left 值或 margin-left。正确解法是结合容器级百分比定位与元素自身尺寸补偿。
✅ 正确居中原理：百分比 + transform 补偿
.header-buttons 宽度为 100%，两个 flex: 1 按钮各占 50%。此时：
- 按钮 1（For You）水平中心位于 25%（即 0% + 50% / 2）
- 按钮 2（Following）水平中心位于 75%（即 50% + 50% / 2）
但 .selected-button 默认以左边缘为定位基准。若直接设 left: 25%，其左边缘会落在按钮中心，导致整体右偏半个宽度。因此必须用 transform: translateX(-50%) 将其向左微调自身宽度的一半，从而实现视觉中心对齐：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
.selected-button {
position: absolute;
bottom: 0;
height: 4px;
width: 53px; /* 固定宽度，便于 translateX(-50%) 计算 */
background-color: #1D9BF0;
border-radius: 15px;
left: 25%; /* 初始选中左侧按钮 */
transform: translateX(-50%); /* 关键：使元素中心对齐 left 值位置 */
transition: left 150ms cubic-bezier(0, 0, 0.2, 1); /* 平滑过渡 */
}✅ JavaScript 控制切换逻辑
通过监听按钮点击，动态修改 .selected-button 的 left 值：
立即学习“前端免费学习笔记（深入）”；
const indicator = document.querySelector('.selected-button');
document.querySelector('.for-you-button').addEventListener('click', () => {
indicator.style.left = '25%'; // 对齐第一个按钮中心
});
document.querySelector('.following-button').addEventListener('click', () => {
indicator.style.left = '75%'; // 对齐第二个按钮中心
});⚠️ 注意：transform: translateX(-50%) 必须保留在 CSS 中，否则 left 百分比定位会失效；同时确保 .selected-button 的 width 为固定值（如 53px），否则 translateX(-50%) 的计算结果不稳定。
✅ 进阶优化建议
- 初始状态同步：可在页面加载时根据默认选中状态设置 left 值，避免闪动；
- 键盘可访问性：为按钮添加 tabindex="0" 和 keydown 事件（如 Enter/Space 触发），提升无障碍体验；
- CSS 变量驱动：将 25%/75% 抽取为 CSS 自定义属性（如 --indicator-left-for-you: 25%），便于主题化维护；
- 防重复触发：添加 pointer-events: none 到 .selected-button，避免遮挡下方按钮点击。
此方案完全脱离 JavaScript 计算尺寸，纯 CSS 驱动，性能高效、语义清晰，适用于任意数量等分 flex: 1 按钮的场景（只需按 (i + 0.5) * (100% / n) 推算 left 值）。
