html - 当显示设置为 flex 时，上标 标签不起作用

Question

我创建了这个 div:

.content {
  display: flex;
}

<div class="content">
  <div>MC</div>
  <div>MR</div>
  <div>M+</div>
  <div>M-</div>
  <div>MS</div>
  <div class="sup">M<sup>-</sup></div>
</div>

并将类内容的显示值设置为 flex，但 sup 标签将不再起作用!我该如何解决这个问题才能让这个标签正常工作？

Answer 1

您只需将对齐重置为基线:

.content {
  display: flex;
  align-items:baseline;
}

<div class="content">
  <div>MC</div>
  <div>MR</div>
  <div>M+</div>
  <div>M-</div>
  <div>MS</div>
  <div class="sup">M<sup>-</sup></div>
</div>