与 flex 结合使用时，CSS 文本对齐无法按预期工作

Question

我有一个垂直导航栏，我希望“.line”元素在“.line”元素增长时将“a”文本元素向左推。但是，仅增长其中一行会将所有文本向左推相同的量，实质上是移动整个导航栏。我认为这可能与文本对齐有关，我试图保留它以进行格式化。我附上了重现描述情况的相关代码，请看一下。

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>