Html 如何使用html编写分数值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7525977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to write fraction value using html?
提问by user774411
I want to write fraction value such as the picture below:
我想写分数值，如下图所示：
How do I write fraction value using html without using image?
如何在不使用图像的情况下使用 html 编写分数值？
NOTE: I don't want this 1 1/2 pattern but strictly just as the pic above
注意：我不想要这种 1 1/2 模式，但严格如上图
回答by thomson_matt
Try the following:
请尝试以下操作：
1<sup>1</sup>⁄<sub>2</sub>This displays as:
这显示为：
11⁄2
1 1⁄ 2
回答by lokesh
.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>回答by Arsen7
The following code will be rendered just as the example in the question, and if the client does not support CSS it will be rendered as plain text, still readable as a fraction:
以下代码将按照问题中的示例呈现，如果客户端不支持 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;
}
The middle <span>serves only for the clients who do not render CSS - the text is still readable as 1 12/256- and that's why you should place a space between the integer and the fraction.
中间<span>只为不渲染 CSS 的客户端服务——文本仍然可读1 12/256——这就是为什么你应该在整数和分数之间放置一个空格。
You may want to change the font-size, because the resulting element may be a little taller than the other characters in the line, or you may want to use a relative position to shift it a little to the bottom.
您可能希望更改字体大小，因为结果元素可能比行中的其他字符高一点，或者您可能希望使用相对位置将其移到底部一点。
But the general idea, as presented here, may be enough for the basic use.
但是这里介绍的一般想法可能足以满足基本用途。
回答by Xavi López
You can use <sup>and <sub>elements in conjunction with the fraction slash entity⁄
您可以将<sup>和<sub>元素与分数斜线实体结合使用⁄
<sup>1</sup>⁄<sub>2</sub>is 1⁄2
<sup>1</sup>⁄<sub>2</sub>是1⁄ 2
UPDATE: I made this fiddlethat shows a hyphenated fraction in HTML using a table.
更新：我制作了这个小提琴，它使用表格在 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>
回答by Giorgi Gzirishvili
Check out the following:
查看以下内容：
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 <span class="frac"><sup>42</sup><span>⁄</span><sub>73</sub></span>.</p>回答by adithyan sp
I think there is an easier way for doing this. Use the following HTML.
我认为有一种更简单的方法可以做到这一点。使用以下 HTML。
1 ½回答by 0b10011
Using MathML(Specification, Wikipedia):
<math>
<mrow>
<mn>1</mn>
<mfrac>
<mi>1</mi>
<mi>2</mi>
</mfrac>
</mrow>
</math>回答by user7930187
br {
content: "";
margin: -1%;
display: block;
}
<big>1</big><sup> <u><big>1</big></u></sup><br/> <sup> <big>2</big></sup>
回答by Arun Sharma
Using pure html and with margin property of br you can work around
使用纯 html 和 br 的边距属性，您可以解决
br {
content: "";
margin: -1%;
display: block;
}<big>1</big><sup> <u><big>1</big></u></sup><br/> <sup> <big>2</big></sup>