Html 物化按钮在'；的显示css是动态更改的

因此，我试图动态更改导航栏上的按钮，并设法做到这一点。然而，每当我这样做时，按钮的垂直对齐就会消失

导航栏最初：

现在，当用户单击“登录”并成功登录到他的google帐户时，我打算删除“登录”按钮，并简单地将其替换为“配置文件”按钮。但是，当我这样做时，profile按钮的垂直对齐会被弄乱。

按钮Css：

。登录btn{
右边距：0px！重要；
边框：2个实心#1565c0；
盒影：无！重要；
背景色：rgb（250250250）；
颜色：1565c0；
}
.登录btn：悬停{
右边距：0px！重要；
边框：2个实心#1565c0；
盒影：无！重要；
背景色：#1565c0；
颜色：rgb（250250250）；
}
.个人资料{
显示：无；
}

导航栏是materialize的标准。下面是应用导航栏顶部链接的导航栏的代码片段

生成自由报表

如何动态更改google登录上的按钮：

var signinChanged=函数（val）{
日志（“登录状态更改为”，val）；
if（val）{
document.getElementById（“登录btn”）.style.display=“无”；
document.getElementById（“profile btn”）.style.display=“flex”；
}否则{
document.getElementById（“登录btn”）.style.display=“flex”；
document.getElementById（“profile btn”）.style.display=“无”；
}
};

---

有人知道为什么会发生这种情况吗？

举个例子，你还没有给我们一个真正的答案——UL类包含什么CSS代码。@RickardElimää它正在使用标准的物化CSS（带选项卡的扩展导航栏）：