CSS: 对齐两个元素，在同一行左右对齐，不带浮点数

Question

我正在尝试对齐两个内联元素，一左一右。我想在不使用浮点数的情况下完成此操作。

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

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 表格，如果您希望活动区域仅在文本上延伸，则在处理 link 时采取一些预防措施。

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

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>

CSS: 对齐两个元素，在同一行左右对齐，不带浮点数

CSS: align two element, to the left and right in the same line WHITHOUT floats

html

css

text-align