在 HTML 中显示对角线分数

Pus*_*pam 3 html css

我关注了 StackOverflow 中的许多帖子,但他们谈论的是堆叠分数。
我正在研究像这样显示对角分数:
在此输入图像描述
这是我的代码:

* {
  font-size: 50px;
}

.container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  border: 1px solid red;
}

.numerator {
  grid-column: 1/2;
  grid-row: 1/2;
  border: 1px solid green;
}

.denominator {
  grid-column: 2/3;
  grid-row: 2/3;
  border: 1px solid green;
}
Run Code Online (Sandbox Code Playgroud)
<span class="container"><span class="numerator">3</span><span class="denominator">5</span></span><br><br>
<span class="container"><span class="numerator">17</span><span class="denominator">4113</span></span>
Run Code Online (Sandbox Code Playgroud)

注意:为了清楚起见,我添加了边框。

但是,我不知道如何在两者之间添加斜杠。请帮忙。

小智 5

一种简单的方法是仅使用下标标签和上标标签。

<p>This text contains <sup>23</sup>/<sub>24</sub> of a number</p>
Run Code Online (Sandbox Code Playgroud)

此文本包含23 / 24个数字

  • 有一个“分数斜杠”Unicode 字符:⁄` (U+2044)。可能看起来比普通斜线好一点。 (3认同)