Question

我有一个包含2个跨度的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;
}

我想在它们的midle中完成水平的alligned跨度，所以它保持格式化，就像元素之间有一个偶数空间

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>

水平对齐flexbox中间的两个跨距

1 个答案: