Javascript 如何解决悬停时文本中心和其他元素的对齐问题

我有一些ulli元素。在每个元素的悬停处，一个新元素添加到文本的右侧。文本的对齐方式为居中，但当在其右侧添加新元素时，其对齐方式将发生更改。我的问题是，文本/新元素的对齐不应该影响在悬停时添加新元素。下面是代码

home.component.html

主页==>

联系我们==>
生产==>

提交

home.component.ts

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
资料：有；
selectedIndex=1；
构造函数（）{}
恩戈尼尼特（）{
}
setIndex（索引：编号）{
this.selectedIndex=索引；
}
removeIndex（索引：编号）{
this.selectedIndex=null；
}
getSelect（）{
此参数。selectedIndex=1；
}
}

css

ulli{
列表样式类型：无；
}
.测试{
显示：无；
}
.btn成功。测试{
显示：块；
}
.文本中心{
文本对齐：居中；
}
.向右浮动{
浮子：轻；
}

您需要将新元素置于常规流程之外，例如使用

位置：绝对
将CSS更改为：

ulli{
列表样式类型：无；
}
.测试{
显示：无；
}
.btn成功。测试{
显示：块；
}
.文本中心{
文本对齐：居中；
}
李{
位置：相对位置；
}
.向右浮动{
位置：绝对位置；
右：0；
排名：0；
}

您可以在此处查看工作示例：
您需要在常规流程之外使用新元素，例如使用
位置：绝对
将CSS更改为：

ulli{
列表样式类型：无；
}
.测试{
显示：无；
}
.btn成功。测试{
显示：块；
}
.文本中心{
文本对齐：居中；
}
李{
位置：相对位置；
}
.向右浮动{
位置：绝对位置；
右：0；
排名：0；
}

您可以在此处查看工作示例：
通过使用
display:none
和
display:block
，您正在从DOM中删除项，从而导致周围的项移动

您可以改为使用
opacity:0
和
opacity:1
来修复此问题

您还可以使用
：hover
伪类大大简化代码


ulli{
列表样式类型：无；
}
.测试{
不透明度：0；
浮动：对；
}
.btn成功：悬停。测试{
不透明度：1；
}


主页==>
联系我们==>
生产==>

通过使用
display:none
和
display:block
，您正在从DOM中删除该项，导致周围的项移动

您可以改为使用
opacity:0
和
opacity:1
来修复此问题

您还可以使用
：hover
伪类大大简化代码


ulli{
列表样式类型：无；
}
.测试{
不透明度：0；
浮动：对；
}
.btn成功：悬停。测试{
不透明度：1；
}


主页==>
联系我们==>
生产==>

请将html/js/css添加到代码段（编辑器中的ctrl-M）以便于调试和回答。我添加了演示链接请将html/js/css添加到代码段（编辑器中的ctrl-M）以便于调试和回答。我添加了演示链接