Javascript 导航栏上的CSS对齐问题

我目前正在创建一个导航栏，无论鼠标在导航栏上还是在导航栏外，它都会展开和折叠。我的问题是，当导航栏展开时，我的图标会与中心对齐，但我希望它们在导航栏展开之前准确定位。我让它们与中心对齐，因为当导航栏折叠时，图标的大小不一样，没有图标看起来“不合适”

let sidenav=document.getElementById（“sidenav”）；
sidenav.onmouseover=函数（）{
sidenav.style.width=“280px”；
document.getElementById（“展开图标”）.classList.add（“展开”）；
document.getElementById（“sidenav expand”）.style.textAlign=“right”；
document.getElementById（“侧导航标题”）.style.display=“内联块”；
//document.getElementById（“links”）.style.float=“left”；
};
sidenav.onmouseout=函数（）{
sidenav.style.width=“75px”；
document.getElementById（“展开图标”）.classList.remove（“展开”）；
document.getElementById（“侧导航展开”）.style.textAlign=“中心”；
document.getElementById（“侧导航标题”）.style.display=“无”；
};
#侧导航{
身高：100%；
宽度：75px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#1e2d；
溢出x：隐藏；
颜色：灰色；
过渡：0.2s；
}
#sidenav品牌{
填充：25px 20px；
背景色：#1a1a27；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
}
#侧导航航向h2{
保证金：0；
}
#侧导航扩展{
文本对齐：居中；
左边距：3倍；
}
.扩大{
变换：旋转（180度）；
}
#侧导航链路{
利润率：15px0；
}
#链接{
列表样式类型：无；
填充：0；
文本对齐：居中；
}
#李连杰{
填充：18px；
显示：块；
}
#链接李：悬停{
颜色：白色；
背景色：热粉红色；
}

导航栏
扩大










只需删除
链接
元素上的
文本对齐：居中
规则即可。我还编辑了css，添加了一些
：hover
规则，以避免使用javascript：


#侧导航{
身高：100%；
最小宽度：75px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#1e2d；
溢出x：隐藏；
颜色：灰色；
过渡：0.2s；
}
#侧导航：悬停{
宽度：280px；
}
#侧导航：悬停#展开图标{
变换：旋转（180度）；
}
#侧导航：悬停#侧导航航向{
显示：内联块；
}
#侧导航#侧导航航向{
显示：无；
}
#sidenav品牌{
填充：25px 20px；
背景色：#1a1a27；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
}
#侧导航航向h2{
保证金：0；
}
#侧导航扩展{
文本对齐：居中；
左边距：3倍；
}
#侧导航链路{
利润率：15px0；
}
#链接{
列表样式类型：无；
填充：0；
}
#李连杰{
填充：18px 20px；
/*为什么不把它们放在左边

#links li{
  text-align:left;
}

要使其工作，请更改
#链接{text align:left}
你关于图标大小的问题把fa-fw类放在了一起。它会使所有的图标大小相同

Check the snippest below:


let sidenav=document.getElementById（“sidenav”）；
sidenav.onmouseover=函数（）{
sidenav.style.width=“280px”；
document.getElementById（“展开图标”）.classList.add（“展开”）；
document.getElementById（“sidenav expand”）.style.textAlign=“right”；
document.getElementById（“侧导航标题”）.style.display=“内联块”；
//document.getElementById（“links”）.style.float=“left”；
};
sidenav.onmouseout=函数（）{
sidenav.style.width=“75px”；
document.getElementById（“展开图标”）.classList.remove（“展开”）；
document.getElementById（“侧导航展开”）.style.textAlign=“中心”；
document.getElementById（“侧导航标题”）.style.display=“无”；
}；
#侧导航{
身高：100%；
宽度：75px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#1e2d；
溢出x：隐藏；
颜色：灰色；
过渡：0.2s；
}
#sidenav品牌{
填充：25px 20px；
背景色：#1a1a27；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
}
#侧导航航向h2{
保证金：0；
}
#侧导航扩展{
文本对齐：居中；
左边距：3倍；
}
.扩大{
变换：旋转（180度）；
}
#侧导航链路{
利润率：15px0；
}
#链接{
列表样式类型：无；
填充：0；
文本对齐：左对齐；
}
#李连杰{
填充：18px；
显示：块；
}
#链接李：悬停{
颜色：白色；
背景色：热粉红色；
}

导航栏
扩大










我已经简单地将
float:left
添加到CSS的
#links
中，我觉得很好

在折叠的版本中，它们仍然居中对齐，因为我没有删除它正上方的一行，该行显示
text align:center；
。但是，当菜单打开时，它们不再改变位置

请参见下面的代码段：


let sidenav=document.getElementById（“sidenav”）；
sidenav.onmouseover=函数（）{
sidenav.style.width=“280px”；
document.getElementById（“展开图标”）.classList.add（“展开”）；
document.getElementById（“sidenav expand”）.style.textAlign=“right”；
document.getElementById（“侧导航标题”）.style.display=“内联块”；
};
sidenav.onmouseout=函数（）{
sidenav.style.width=“75px”；
document.getElementById（“展开图标”）.c