发现问题左对齐的横向列表宽度不固定由文本内容和 padding 撑开有的文本中包含符号、英文、数字鼠标悬浮时添加加粗效果font-weight: bold含英文文本正常情况宽度是 148.34pxhover 加粗后宽度变成了 151.19px含数字文本正常情况宽度是 131.64pxhover 加粗后宽度变成了 133.33px含符号文本正常情况宽度是 113.89pxhover 加粗后宽度变成了 114.45px解决问题盒子宽度需要根据文本字数长度变化而变化所以宽度不可以写死盒子宽度有两个值一种是初始状态宽度 width1一种是文本加粗后的宽度 width2如果初始状态盒子宽度就保持为 width2就可以避免悬浮加粗抖动的问题了可以利用伪元素和 visibility 属性进行隐形占位添加伪元素利用 attr 属性拿到文本内容切换成 block 模块换行顶开盒子的宽度伪元素高度设置为 0不影响原始文本的竖向居中伪元素设置为 visibility: hidden; 元素隐藏但是占位含英文文本正常情况宽度已经是 151.19px 了悬浮后还是 151.19px宽度未变化盒子不会再抖动完整示例bodydivdivclasslistdivclasssinTitletitle英文内容wenzi英文内容wenzi/divdivclasssinTitletitle文字内容文字内容/divdivclasssinTitletitle数字内容123数字内容123/divdivclasssinTitletitle文字内容文字内容/divdivclasssinTitletitle符号内容#符号内容#/divdivclasssinTitletitle文字内容文字内容/div/div/divstylelangcss.list{height:40px;background:#efefef;display:flex;align-items:center;justify-content:flex-start;}.sinTitle{padding:0 20px;cursor:pointer;border-right:1px solid #333;}.sinTitle:last-child{border:none;}.sinTitle:hover{font-weight:bold;}.sinTitle::after{content:attr(title);font-weight:bold;display:block;height:0;visibility:hidden;}/style/body