求助：导航栏Sign Up按钮hover展开时如何避免带动其他元素移动

你通过修改btn的width属性实现hover展开动画，但导航栏采用flex布局，元素宽度的变化会触发flex容器的重排逻辑。按钮变宽后会挤占其他元素的可用空间，导致导航栏内的链接、标题等元素被迫移位。

推荐使用transform: scaleX()替代修改width来实现展开效果——transform属于视觉层面的变换，不会改变元素的实际占位，因此不会触发布局重排，其他导航元素也不会受到影响。

修改后的CSS代码 #

/* 替换原有的expand动画 */
@keyframes expand {
    from { transform: scaleX(1); }
    /* 135/125=1.08，对应原宽度从125px到135px的比例 */
    to { transform: scaleX(1.08); }
}

#nav-bar {
    position: absolute;
    overflow: hidden;
    display: flex;
    /* 移除多余的float: inline-start，flex布局下无需该属性 */
    justify-content: space-around;
    border-bottom: 1px solid black;
    width: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 25px;
}

.logo {
    padding-top: 15px;
}

li a {
    text-decoration: none;
    color: #111;
}

li a:hover {
    color: #c83737;
}

.btn{
    position: relative;
    background-color: #c83737;
    width: 125px;
    height: 30px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 添加transform-origin确保展开方向与原效果一致（可选） */
    transform-origin: center;
}

.btn:hover {
    animation: expand 0.5s forwards;
    /* forwards参数让动画结束后保持最终状态 */
}

.btn a {
    color:#e3e3e3;
}

.btn a:hover{
    color:#e3e3e3;
}

补充优化（可选） #

如果不想使用动画，也可以用transition实现更简洁的hover效果：

.btn{
    /* 保留原有属性 */
    transition: transform 0.5s ease;
}

.btn:hover {
    transform: scaleX(1.08);
}

这种写法更简洁，且同样不会影响其他元素的布局。

内容的提问来源于stack exchange，提问作者Muhammad Naseem Siddiqui