通过移除绝对定位并利用 flex 布局与文本方向控制，可使下拉菜单自动贴合按钮右侧、不溢出视口，同时保持响应式对齐。
通过移除绝对定位并利用 flex 布局与文本方向控制，可使下拉菜单自动贴合按钮右侧、不溢出视口，同时保持响应式对齐。
默认使用 position: absolute 的下拉菜单容易脱离文档流，导致其相对于视口或最近定位祖先计算位置，当按钮靠近窗口右侧时，菜单会向右溢出——用户需横向滚动才能看到全部内容。根本解法不是硬编码 right 值（破坏响应性），而是回归流式布局逻辑。
推荐方案：利用 Flex 容器自然对齐 + RTL 方向微调
将 .dropdown-content 从绝对定位改为文档流内元素，并借助父容器的 flex-end 对齐与 direction: rtl 实现“视觉右对齐”效果：
.buttons {
display: flex;
justify-content: flex-end;
color: red;
text-align: right; /* 辅助内联元素对齐 */
}
.dropdown-content {
display: none;
direction: rtl; /* 关键：使子元素（如 span）从右向左渲染，等效于右对齐 */
width: 120px;
padding: 14px;
background-color: yellow;
margin-top: 4px; /* 可选：增加与触发按钮的间距 */
}
.show {
display: flex;
}
HTML 结构保持不变，但语义更清晰：.dropdown-content 紧邻 元素，同属一个 div 子容器。由于父级 .buttons 是 flex 容器且 justify-content: flex-end，整个子 div（含按钮和下拉菜单）被推至右侧；而 direction: rtl 确保菜单内部内容（如 Logout 文本）在固定宽度内自然靠右显示，避免文字截断或错位。
✅ 优势总结：
- 无硬编码偏移值，100% 响应式；
- 不依赖 JavaScript 计算位置，性能更优；
- 兼容移动端 viewport 缩放与不同屏幕尺寸；
- 保留语义化 HTML 结构，便于可访问性（ARIA 支持更易扩展）。
⚠️ 注意事项：
- 若菜单需悬浮于其他内容之上，请添加 z-index（如 z-index: 1000）；
- 如需支持多语言（含 LTR 文本），建议改用 text-align: right 配合 margin-left: auto 替代 direction: rtl，避免影响文字方向；
- 生产环境建议将内联 onclick 替换为 addEventListener，提升可维护性。
