以HTML显示对角线分数

Question

我关注了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;
}

<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>

注意：为方便起见，我添加了边框。

但是，我不知道如何在两者之间添加斜线。请帮助。

Answer 1

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

<p>This text contains <sup>23</sup>/<sub>24</sub> of a number</p>

此文本包含数字的²³ / ₂₄

Answer 2

您可以尝试如下所示的伪元素。您还可以简化很多网格代码：

* {
  font-size: 50px;
}

.container {
  display: inline-grid;
}

.denominator {
  grid-column: 2;
  grid-row: 2;
}

.numerator {
  position: relative;
}

.numerator:after {
  content: "";
  position: absolute;
  left: 100%;
  /* Give top and bottom the same value*/
  top: 50%;
  bottom: -50%;
  width: 3px;
  background: black;
  transform: rotate(45deg); /* Adjust this like you want */
}


/* Irrelevant styles */
.container {
  border: 1px solid red;
}

.numerator {
  border: 1px solid green;
}

.denominator {
  border: 1px solid green;
}

<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>

Answer 3

您可以用vertical-align取得接近的结果：

vertical-align

* {
  font-size: 50px;
}

.container {
  border: 1px solid red;
}

.numerator::after {
  content: '/';
  font-size: 1rem;
  position: absolute;
}

.numerator {
  font-size: 0.5rem;
  margin-bottom: 20px;
  vertical-align: text-top;
}

.denominator {
  font-size: 0.5rem;
  vertical-align: text-bottom;
}

Answer 4

这是使用旋转变换的另一种方法。

<span class="container">
  <span class="numerator">323</span>
  <span class="denominator">5</span>
</span>

<br><br>
<span class="container">
  <span class="numerator">17</span>
  <span class="denominator">4113</span>
</span>

.fraction {
  display: flex;
  justify-content: center;
  width: 50px;
  transform: rotate(16deg);
  font-size: 1.8rem;
}

.denominator,
.numerator {
  transform: rotate(-16deg);
}

.denominator {
  display: flex;
  align-items: flex-end;
}

.divide {
  font-size: 3rem;
}

Answer 5

您也可以混合使用

<div class="fraction">
    <span class="numerator">3</span>
    <span class="divide">/</span>
    <span class="denominator">5</span>
</div>

，伪元素（甚至是vertical-align画一条线）和专用的html标签，例如background和<sup>。

这里可能是混合的

<sub>

span,
sup,
b {
  display: inline-block;
  padding: 0 0.2em 0 0
}
.PI {font-weight:bold;font-family:cursive}

b.bot:before {
  content: '';
  position: absolute;
  height: 1.5em;
  bottom: 0;
  margin-left: -.35em;
  border: solid 1px;
  transform: rotate(30deg)
}

.bot {
  padding: 0 0.2em;
  ;
  vertical-align: -.5em;
  position: relative
}
.disclaimer {color:tomato;}