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

您可以使用 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>。

Answer 2

您可以尝试 CSS 表格，如果您希望活动区域仅在文本上延伸，请在处理链接时采取一些预防措施。

根据您希望它在灵活设计中的工作方式，浮动可能是一个可行的选择。

h1 {
  display: table;
  width: 100%;
}
h1 span, h1 a {
  display: table-cell;
}
h1 span {
  text-align: left;
}
h1 a {
  text-align: right;
  border: 1px dotted blue;
  width: 1%;
  white-space: nowrap;
}

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

Answer 3

你可以使用一些 flexbox 魔法：

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

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