与flex结合使用时，CSS文本对齐无法正常工作

Question

我有一个像这样的垂直导航栏，我希望在其中'.line'元素随着'.line'元素的增长而将'a'文本元素向左推。但是，仅增加其中一行就可以将所有文本向左推相同的量，从而实质上移动了整个导航栏。我认为这可能与text-align有关，我正在尝试将其用于格式设置。我已经附上了有关重现上述情况的相关代码，请看一看。

nav {
  -webkit-transform: translateY(22vh);
  -ms-transform: translateY(22vh);
  transform: translateY(22vh);
  position: fixed;
  right: 0;
  overflow-x: hidden;
  z-index: 1000 !important;
  opacity: 1;
  margin: 10px 0 10px 10px;
}

nav div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
}

nav div a {
  display: inline-block;
  margin-right: 10px;
  color: black;
  font-size: 18px;
  text-decoration: none;
}

nav div .line {
  display: block;
  margin: 0px;
  width: 0px;
  height: 1.5px;
  float: right;
  background-color: black;
  opacity: 0;
}

nav div #tab-2 .line {
  width: 80px;
  opacity: 1;
}

<nav>
  <div id="tab-1">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-2">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-3">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
</nav>

到目前为止，我已经尝试做一些事情，例如手动增加'＃tab-＃'div容器的大小，同时增加行的宽度，同时保持其余行的最大宽度，但这没用。

Here is a visual representation of what I want the end result to be

Answer 1

其中一个选项是：

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

更新

您可以尝试以下操作：

nav {
  -webkit-transform: translateY(22vh);
  -ms-transform: translateY(22vh);
  transform: translateY(22vh);
  position: fixed;
  right: 0;
  overflow-x: hidden;
  z-index: 1000 !important;
  opacity: 1;
  margin: 10px 0 10px 10px;
}

nav div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
}

nav div a {
  display: inline-block;
  margin-right: 10px;
  color: black;
  font-size: 18px;
  text-decoration: none;
}

nav div .line {
  display: block;
  margin: 0px;
  width: 0px;
  height: 1.5px;
  float: right;
  background-color: black;
  opacity: 0;
}

nav div#tab-2 .line {
  width: 80px;
  opacity: 1;
}

nav div {
  position: relative;
  width: 150px;
}
nav div a {
  position: absolute;
  right: 40px;
}
nav div#tab-2 a {
  position: relative;
  right: 0;
}

<nav>
  <div id="tab-1">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-2">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-3">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
</nav>

或者，具有悬停效果（有待改进，但给出了建议）：

nav {
  -webkit-transform: translateY(22vh);
  -ms-transform: translateY(22vh);
  transform: translateY(22vh);
  position: fixed;
  right: 0;
  overflow-x: hidden;
  z-index: 1000 !important;
  opacity: 1;
  margin: 10px 0 10px 10px;
}

nav div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
}

nav div a {
  display: inline-block;
  margin-right: 10px;
  color: black;
  font-size: 18px;
  text-decoration: none;
}

nav div .line {
  display: block;
  margin: 0px;
  width: 0px;
  height: 1.5px;
  float: right;
  background-color: black;
  opacity: 0;
}

nav div {
  position: relative;
  width: 150px;
}
nav div a {
  position: absolute;
  right: 40px;
}
nav div:hover a {
  position: relative;
  right: 0;
}
nav div .line {
  width: 0;
  opacity: 0;
}
nav div:hover .line {
  width: 80px;
  opacity: 1;
}

<nav>
  <div id="tab-1">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-2">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
  <div id="tab-3">
    <a href="#">About</a>
    <div class="line"></div>
  </div>
</nav>