68

我想写分数值，如下图：

在此处输入图像描述

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

注意：我不想要这个 1 1/2 模式，但严格来说就像上面的图片

4

11 回答 11

94

尝试以下操作：

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

这显示为：

1 1 ⁄ 2

于 2011-09-23T08:05:50.000 回答
37 

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

于 2016-02-10T10:13:24.670 回答
13

以下代码将与问题中的示例一样呈现，如果客户端不支持 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- 这就是为什么您应该在整数和分数之间放置一个空格。

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

但是这里介绍的一般概念可能足以满足基本用途。

于 2011-09-23T08:59:35.933 回答
8

查看以下内容：

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>

代码笔

于 2017-01-16T15:08:46.147 回答
7

您可以将<sup>和<sub>元素与分数斜线实体结合使用 &frasl;

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

更新：我制作了这个小提琴，它使用表格在 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>
于 2011-09-23T08:07:01.883 回答
4

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

1 &frac12;
结果是 1 ½

于 2017-04-27T05:32:35.903 回答
3

使用MathML（规范，维基百科）：

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>

于 2012-04-10T00:05:46.930 回答
2

使用纯 html 和 br 的边距属性，您可以解决

br {   
    content: "";
    margin: -1%;
    display: block;
 }
<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>

于 2017-01-28T07:24:05.817 回答
0 
br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>
于 2018-01-30T11:48:52.983 回答
0

这是另一种使用较新的 CSS 方法的方法。此方法也使用自定义标签，但<div class = "..."></div>如果您不喜欢自定义标签，可以将其更改为。

将以下内容复制到您的 CSS：

使用.fractionand.numer如果你使用类代替

fraction {
  display: inline-grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;

  font-size: 0.8em; // You can change fraction size here. I recommend 0.5em ~ 0.8em
  vertical-align: top;
}

numer {
  border-bottom: 1px solid;
}

您现在可以像这样使用标签：

Add 1 <fraction> <numer>1</numer> 2 </fraction> cups of flour into the bowl and stir.

输出

输出图像

我还建议对屏幕阅读器输出使用只读格式：

CSS

read {
  position: absolute;
  font-size: 0;
}

HTML

1 <fraction> <read>and</read> <numer>1</numer> <read>over</read> 2 </fraction>

屏幕阅读器：“一加一加二……”

于 2021-03-10T16:11:30.833 回答
-1

是这样的：

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

于 2022-01-12T14:28:41.043 回答