Html 如何使两个不同大小的文本浮动到相同的高度？

因此，在图片中，你可以看到数字“5384”和数字“50”不会浮动到相同的高度。我知道这两个段落都浮到了最上面，但我如何让它们看起来像在同一高度上

我不想使用“边距顶部：一些像素”，因为这样不能正确缩放，是吗

。节省{
字体大小：3rem；
保证金：0；
显示：内联；
}
.节省{
字体大小：1.5rem；
保证金：0.3雷姆；
显示：内联；
垂直对齐：顶部；
}

5.384
50

这可以通过使用

sup

html标记轻松实现

请在此处阅读有关此标签的更多信息

p{
字体大小：粗体
}
p sup{
字体大小：正常
}

---

5.384 50

只需添加一个父元素并使用display:flex即可。您可以检查两个元素的高度是否相同。如果需要，可以使用其他flex特性更改对齐方式

p{margin:0；}/*重置p margin*/
.节省总吨{
显示器：flex；
}
.储蓄{
字体大小：3rem；
}
.节省{
字体大小：1.5rem；
}

5.384
50

我们可以从tag

中获得灵感，使用class

savings

制作

，使用class

savings

元素将其包裹起来，制作如下内容：

.up-small {
  vertical-align: super; /*make element to be aligned with the superscript baseline of the parent*/
  font-size: 50%; /*fits proportions*/
}

示例查看代码段

。节省{
字体大小：3rem；
保证金：0；
显示：内联；
}
.储蓄.储蓄{
垂直对齐：超级；
字体大小：50%；
}

5.38450