将标题内的跨度与右侧对齐

Question

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

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

Answer 2

您可以使用小调整添加position:absolute属性

＆＃13;

＆＃13;

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

span {
  font-size: 20px;
   position: absolute;
  right: 6px;  
  margin-top:25px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;