html - 水平对齐 flexbox 中间的两个 span

Question

我有一个包含 2 个 span 的 div (flex)，我想像 this 一样对齐.

我现在拥有的是this

代码:

<div className="MemberLinks">
      <div>
        <span className="linkTitle">Schedule of Benefits</span>
        <span>
          <a href="./manifest.json">
            doc.pdf
          </a>
        </span>
      </div>
      <div>
        <span className="linkTitle">General Exclusions</span>
        <span>
          <a href="./manifest.json">
            doc.pdf
          </a>
        </span>
      </div>
    </div>

CSS:

.MemberLinks {
margin-top: 1em;
display: flex;
flex-direction: column;
}
.linkTitle {
display: inline-block;
margin: 0 .6em 0 0;
}

我想在它们中间完成水平对齐的跨度，所以它保持格式化，就像元素之间有均匀的空间一样

Answer 1

我认为你不需要使用 flex 来实现这种效果。

我所做的是移除 flex，将 span 设置为 50% 宽度，然后将 text-align 属性设置为 right 用于第一个 span。

.MemberLinks {
  margin-top: 1em;
}

.MemberLinks span {
  display: inline-block;
  width: 50%;
  padding: 0 0.1em;
  box-sizing: border-box;
}

.MemberLinks span:first-of-type {
  text-align: right;
}

<div class="MemberLinks">
  <div>
    <span class="linkTitle">Schedule of Benefits</span><span>
          <a href="./manifest.json">
            manifestdoc.pdf
          </a>
        </span>
  </div>
  <div>
    <span class="linkTitle">General Exclusions</span><span>
          <a href="./manifest.json">
            otherdoc.pdf
          </a>
        </span>
  </div>
</div>