当显示设置为flex时，上标<sup>标记不起作用

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>