用margin-right实现hover右移会抖动，因改变后父容器剩余空间变小，易触发换行或重排；更稳妥方案是用transform: translatex()，不触发重排、不影响文档流，配合transition和will-change可提升性能与体验。
hover时用margin-right实现右移，为什么元素会“抖动”
因为margin-right改变后，父容器剩余空间变小，可能触发换行或重排，尤其在display: inline-block或浮动布局里特别明显。这不是bug，是盒模型的自然反应。
- 只对
display: inline或inline-block的列表项加margin-right，容易让后续项被挤到下一行 - 如果父容器
white-space: nowrap没设，文字内容多的<li>也可能因宽度变化导致换行 - 更稳妥的做法是改用
transform: translateX()，它不触发重排，只走合成层
transform: translateX()比margin-right更可靠的实际写法
真正想让悬停“滑过去”又不扰动布局，transform是首选。它不影响文档流，动画也更顺滑。
- 给
li加transition: transform 0.2s ease，再在:hover里写transform: translateX(8px) - 别漏掉
will-change: transform（可选），尤其在低性能设备上能提前提示浏览器优化 - 如果列表项本身有
margin或padding，translateX不会影响它们，而margin-right会叠加或冲突
li {
transition: transform 0.2s ease;
}
li:hover {
transform: translateX(12px);
}
IE11兼容性下还能用translateX吗
能，但得加-ms-前缀，且必须确保li不是display: inline（IE11对inline元素的transform支持极差）。
- 强制设
display: inline-block或display: block，哪怕只是li { display: inline-block; } - 加前缀：
-ms-transform: translateX(12px)，现代写法放后面覆盖即可 - 避免在IE11里用
transform: translateX()配合flex父容器，旧版Flexbox和Transform组合容易失效
右移效果和可访问性之间的隐性冲突
视觉上的右移如果太剧烈（比如超过24px），键盘用户用Tab聚焦时，焦点框可能被移出视口，或者与相邻项重叠，导致屏幕阅读器误判。
- 建议位移量控制在
4px–12px之间，既明显又不破坏焦点流 - 别只依赖
:hover，同步加:focus和:focus-visible样式，否则键盘用户看不到反馈 - 如果列表项本身带
outline，translateX不会移动outline，要手动用outline-offset微调
真正难的不是让元素动起来，而是动完之后，布局、焦点、读屏都还稳得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
