html - 在 html 中在分数旁边写文本

Question

我之前问过这个问题:How to represent fractions in html .这是关于在 html 中编写分子和分母，提供的解决方案允许我以正确的格式编写分数。

但是，我不能在它旁边写文字。如果我在它旁边写文字，它会一起出现在顶部或底部。它出现在它下面。我希望文本出现在它旁边。

代码在这里:

.fraction {
  position: relative;
  width: 1em;
  font-size: 2em;
}
.numerator {
  border-bottom: 2px solid black;
  text-align: center;
}
.denominator {
  border-right: 2px solid black;
  width: 0.75em;
  text-align: center;
}

<div class="fraction">
  <div class="numerator">3</div>
  <div class="denominator">8</div>
</div>

文本显示如下:

有什么解决办法吗？有什么解决办法吗？

Answer 1

将 .fraction 类显示属性设置为内联 block 。 我想您还必须摆弄它的 vertical-align 属性。