html - CSS:对齐两个元素，在同一行中左右对齐，没有 float

Question

我试图对齐两个内联元素，一个在左边，一个在右边。我想在不使用 float 的情况下完成此操作。

在我的例子中，我有一个 h1，带有一个 span 和一个链接。我希望跨度向左对齐，链接向右对齐。

http://jsfiddle.net/Lkfacta3/

h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}

 <h1><span>Align me left</span> <a href="">align me right</a></h1>

这是期望的结果:

Answer 1

你可以使用一些 flexbox 魔法:

h1 {
  display: flex;
  justify-content: space-between;
}

<h1>
  <span>Align me left</span>
  <a href="">align me right</a>
</h1>