html - 将标题内的跨度向右对齐

Question

如何在不使用 float 的情况下将字幕右对齐？我需要它与标题处于同一级别。

<h2>Title <span>Subtitle</span> </h2>

h2 {
  border: 1px solid #333;
  font-size: 50px;
}

span {
  font-size: 20px;
}

Answer 1

Flexbox 可以做到这一点。

h2 {
  border: 1px solid #333;
  font-size: 50px;
  display:flex;
  align-items:baseline;
}

span {
  font-size: 20px;
  margin-left:auto;
}

<h2>Title <span>Subtitle</span> </h2>