Html CSS文本对齐与flex结合使用时未按预期工作

我有一个垂直的导航栏，就像这样，我希望“.line”元素在“.line”元素增长时将“a”文本元素推到左边。但是，只增加一行会将所有文本向左推相同的量，实际上会移动整个导航栏。我认为这可能与文本对齐有关，我正试图保留文本对齐以进行格式化。我已经附上了相关代码重新描述的情况，请看一看

nav{
-webkit转换：translateY（22vh）；
-ms变换：translateY（22vh）；
转换：translateY（22vh）；
位置：固定；
右：0；
溢出x：隐藏；
z指数：1000！重要；
不透明度：1；
利润率：10px 0 10px 10px；
}
导航部{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：证明；
-webkit证明内容：之间的空间；
-ms-flex-pack:justify；
证明内容：之间的空间；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
利润率：20px0；
}
导航a组{
显示：内联块；
右边距：10px；
颜色：黑色；
字号：18px；
文字装饰：无；
}
导航分线{
显示：块；
边际：0px；
宽度：0px；
高度：1.5px；
浮动：对；
背景色：黑色；
不透明度：0；
}
导航分区#表2.线路{
宽度：80px；
不透明度：1；
}

其中一个选项是：

nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

更新 您可以尝试以下方法：

nav{
-webkit转换：translateY（22vh）；
-ms变换：translateY（22vh）；
转换：translateY（22vh）；
位置：固定；
右：0；
溢出x：隐藏；
z指数：1000！重要；
不透明度：1；
利润率：10px 0 10px 10px；
}
导航部{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：证明；
-webkit证明内容：之间的空间；
-ms-flex-pack:justify；
证明内容：之间的空间；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
利润率：20px0；
}
导航a组{
显示：内联块；
右边距：10px；
颜色：黑色；
字号：18px；
文字装饰：无；
}
导航分线{
显示：块；
边际：0px；
宽度：0px；
高度：1.5px；
浮动：对；
背景色：黑色；
不透明度：0；
}
导航分区#表2.线路{
宽度：80px；
不透明度：1；
}
导航部{
位置：相对位置；
宽度：150px；
}
导航a组{
位置：绝对位置；
右：40px；
}
导航分区表2 a{
位置：相对位置；
右：0；
}

其中一个选项是：

nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

更新 您可以尝试以下方法：

nav{
-webkit转换：translateY（22vh）；
-ms变换：translateY（22vh）；
转换：translateY（22vh）；
位置：固定；
右：0；
溢出x：隐藏；
z指数：1000！重要；
不透明度：1；
利润率：10px 0 10px 10px；
}
导航部{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：证明；
-webkit证明内容：之间的空间；
-ms-flex-pack:justify；
证明内容：之间的空间；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
利润率：20px0；
}
导航a组{
显示：内联块；
右边距：10px；
颜色：黑色；
字号：18px；
文字装饰：无；
}
导航分线{
显示：块；
边际：0px；
宽度：0px；
高度：1.5px；
浮动：对；
背景色：黑色；
不透明度：0；
}
导航分区#表2.线路{
宽度：80px；
不透明度：1；
}
导航部{
位置：相对位置；
宽度：150px；
}
导航a组{
位置：绝对位置；
右：40px；
}
导航分区表2 a{
位置：相对位置；
右：0；
}

在保持锚定标签全部左对齐的同时，是否有办法做到这一点？我也曾考虑过给锚定设置宽度，但这会干扰线条开始扩展时线条与文本交互的视觉效果。你能画一个示例图像吗？我不确定我是否知道你的意思。在你写的问题中，“但是，只增加一行会将所有文本向左移动相同的量，基本上移动了整个导航栏”，现在你听起来好像希望所有链接都在同一列中；）。我更新了帖子，加入了我想要的图片。有没有办法在保持锚定标签左对齐的同时做到这一点？我也曾考虑过给锚定设置宽度，但这会干扰线条开始扩展时线条与文本交互的视觉效果。你能画一个示例图像吗？我不确定我是否知道你的意思。在你写的问题中，“但是，只增加一行会将所有文本向左移动相同的量，基本上移动了整个导航栏”，现在你听起来好像希望所有链接都在同一列中；）。我更新了帖子，加入了我想要的图片。