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魔法：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用CSS display:table + display:table-cell。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，使用display:inline-block。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意，上述任何一种情况都会使<a>可点击区域变大，如果您需要更正，请将其包装到另一个<span>。

Answer 3

如果您希望活动区域仅扩展到文本上，您可以尝试使用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>