CSS:对齐两个元素,在同一行中左右两侧没有浮点数

Question

我试图对齐两个内联元素,一个在左边,一个在右边.我想在不使用花车的情况下完成此任务.

就我而言,我有一个带有跨度和链接的h1.我希望跨度对齐左侧,链接对齐右侧.

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>

Answer 2

你可以使用CSS display:table+ display:table-cell.

h1 {
  display: table;
  width: 100%;
  margin: 0;
}
h1>span {
  text-align: left;
  display: table-cell;
}
h1>a {
  text-align: right;
  display: table-cell;
}

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

或者,做到这一点display:inline-block.

h1 {
  font-size: 0; /* remove whitespace */
}
h1>span,
h1>a {
  font-size: 32px;
  display: inline-block;
  width: 50%;
}
h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}

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

注意,上面的任何一种方法都会使<a>可点击区域变大,<span>如果您需要更正它,请将其包装到另一个区域.