如何使用html写分数值？

Question

我想写分数值,如下图:

如何在不使用图像的情况下使用html编写分数值？

注意:我不希望这个1 1/2模式,但严格如上图所示

Answer 1

请尝试以下方法:

1<sup>1</sup>&frasl;<sub>2</sub>

这显示为:

1 ¹/₂

Answer 2

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
} 

1 <div class="frac">
    <span>1</span>
    <span class="symbol">/</span>
    <span class="bottom">2</span>
    
</div>

Answer 3

以下代码将作为问题中的示例呈现,如果客户端不支持CSS,它将呈现为纯文本,仍然可读作为分数:

<p>1 <span class="frac"><sup>12</sup><span>/</span><sub>256</sub></span>.</p>

span.frac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}

中间<span>仅用于不渲染CSS的客户端 - 文本仍然可读1 12/256- 这就是为什么你应该在整数和分数之间放置一个空格.

您可能想要更改字体大小,因为生成的元素可能比行中的其他字符稍高,或者您可能希望使用相对位置将其稍微移动到底部.

但是,如此处所示的一般想法可能足以用于基本用途.

Answer 4

您可以将<sup>和<sub>元素结合使用split slash实体 ⁄

<sup>1</sup>&frasl;<sub>2</sub> 是¹/₂

更新:我做了这个小提琴,用HTML表示HTML中的带连字符的分数.

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>

Answer 5

我认为有一种更简单的方法可以做到这一点。使用以下 HTML。

1 ½

结果是 1 ½

Answer 6

查看以下内容：

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

代码笔