我有一小部分，我想整齐漂亮地展示它。
例如
4/5
将会
4
—
5
我已经看过这个，虽然这个解决方案不错，但问题在于让 4 和 5 在同一条线上，用一条直线将它们分开，就像在传统分数中一样。
任何黑客或解决方案都是可以接受的。不一定可以接受 CSS、Javascript 或任何其他语言。
问问题
25951 次
11 回答
19
.fraction {
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.001em;
text-align: center;
font-size: 12px;
}
.fraction > span {
display: block;
padding: 0.1em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}Foobar
<div class="fraction">
<span class="fup">4</span>
<span class="bar">/</span>
<span class="fdn">5</span>
</div>
Foobar更改 .fraction 字体大小以将其设置为您想要的大小
于 2012-12-14T12:40:09.983 回答
18
如果您乐于使用 JQuery 并希望最小化您需要添加的标记，那么您可以使用以下内容：
CSS
.fraction, .top, .bottom {
padding: 0 5px;
}
.fraction {
display: inline-block;
text-align: center;
}
.bottom{
border-top: 1px solid #000;
display: block;
}
HTML
<div class="fraction">1/2</div>
<div class="fraction">3/4</div>
<div class="fraction">1/32</div>
<div class="fraction">77/102</div>
jQuery
$('.fraction').each(function(key, value) {
$this = $(this)
var split = $this.html().split("/")
if( split.length == 2 ){
$this.html('
<span class="top">'+split[0]+'</span>
<span class="bottom">'+split[1]+'</span>
')
}
});
工作示例：http: //jsfiddle.net/xW7d8/
没有 JQuery
要在不使用 JQuery 的情况下实现这一点，您可以使用以下 HTML 和与上面相同的 CSS：
<div class="fraction">
<span class="top">1</span>
<span class="bottom">100</span>
</div>
于 2012-12-14T12:58:35.970 回答
4
您需要使用字体中可用的上下文替代方案。目前对此的支持不是很好，但它迟早会出现在任何地方。
如果您fractions在号码上有课程，您将使用：
.fractions {
-moz-font-feature-settings: "frac=1";
-ms-font-feature-settings: "frac" 1;
}
恼人的 Gecko 使用将传递给字体的原始信息，但 ms 版本应该成为标准。
这是一个演示。http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions
现在它只在 Gecko 和 Trident 中，但 Webkit 肯定会赶上。
于 2012-12-14T12:40:30.003 回答
4
您可能想查看使用 Javascript的MathJax 之类的东西。
如果您只使用基本分数，则可以使用 Unicode 字符（或等效的 HTML 实体）：
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞</p>
对于纯 CSS，使用水平条可能是“传统的”，但现在大多数人使用对角斜线，即使在纸上写分数时也是如此。这是我使用的：
.fraction > sup,
.fraction > sub {
font-size: .66em;
}
.fraction > sup {
vertical-align: .4em;
}
.fraction > sub {
vertical-align: -.2em;
}
使用此 HTML：
<span class="fraction">
<sup>1</sup>⁄<sub>8</sub>
</span>
于 2012-12-14T12:44:06.953 回答
3
Flexbox 现在允许一些额外的选项
.fraction {
display: inline-flex;
flex-direction: column;
padding: 1em;
align-items: center;
}
.numerator {
border-bottom: 2px solid grey;
}<span class="fraction">
<span class="numerator">3</span>
<span class="denominator">4</span>
</span>
<span class="fraction">
<span class="numerator">12</span>
<span class="denominator">7</span>
</span>于 2016-07-18T14:40:58.320 回答
3
我个人认为在这种情况下不需要 JavaScript。
查看以下内容：
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>于 2017-01-16T15:58:39.530 回答
1
我发现最好的组合是使用 0.5em 大小和 unicode 小数斜线（⁄“ ⁄ ”）。分子应该是vertical-align:super。如果您愿意放弃对 IE7 及以下版本的支持，您可以使用:beforepsuedo-class 使标记更简单。
.num {
font-size: 0.5em;
vertical-align: super;
}
.den {
font-size: 0.5em;
}
.den:before {
content: '\2044';
font-size: 2em;
}
和
<span class="num">19</span><span class="den">45</span>
（演示）
你也可以使用直接的 unicode 方法来渲染 ¹⁹⁄₄₅：
¹⁹⁄₄₅
（参见维基百科文章。）
于 2013-08-05T18:03:45.760 回答
1
这不会自动将“1/2”转换为分数形式。但是，如果您对模板有更多控制权，则可以执行以下操作。由于还没有人建议使用表格，所以这里是：
HTML：
<table class="fraction">
<tr>
<td class="top">Top of Fraction</td>
</tr>
<tr>
<td class="bottom">Bottom of Fraction</td>
</tr>
</table>
CSS：
table.fraction {
display: inline-block;
text-align: center;
margin-left: 1em;
}
table.fraction td {
line-height: 2em;
}
table.fraction td.top {
border-bottom: 1px solid darkgray;
}
结果：
于 2014-10-16T03:22:56.257 回答
1
我们想要一个垂直书写的分数，它正确对齐，容纳混合数字，并且可以使用 HTML 简洁地写入。这可以简单地使用 HTML 属性或标签以及一些 CSS 来完成。不涉及 Javascript。此方法也适用于对齐混合分数以确保分数垂直居中，但不适合多层复杂分数。
使用标签名称的想法
让fraction, numerator,denominator成为通过内联块、相对位置、垂直对齐和边框在纯 HTML 和 CSS 中呈现分数所需的自定义标签名称。有时需要一个小的左侧填充以避免冲突。CSS 样式将是：
fraction, numerator, denominator {
display: inline-block;
vertical-align: middle;
padding-left: 2px
}
fraction {
display: inline-block;
text-align: center;
}
numerator {
border-top: 1px solid;
display: block;
}
那么，输入分数的用法依次涉及这三个标签：
<fraction>
<numerator>A</numerator>
<denominator>B</denominator>
</fraction>.
例子
我缩短了标签名称并添加了填充以解决冲突。我还尝试实现一个小部分 html。
frac, numer, denom, fracsmall {
display: inline-block;
vertical-align: middle;
margin-left: 2px; margin-right: 2px;
}
frac, fracsmall {
display: inline-block;
text-align: center;
}
denom {
border-top: 1px solid;
display: block; /* Creates new line */
}
fracsmall > numer {
font-size: 75%;
}
fracsmall > denom {
font-size: 75%;
}The value of 9<frac><numer>3</numer><denom>4</denom></frac> is also written
<frac><numer>39</numer><denom>4</denom></frac>.
Also, <fracsmall><numer>1</numer><denom>1</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>2</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>3</denom></fracsmall> + ... is divergent.
<br />
Here is a more complex fraction
<frac>
<numer>
1 +
<frac><numer>1</numer><denom>x</denom></frac> +
<frac><numer>1</numer><denom>x<sup>2</sup></denom></frac>
</numer>
<denom>
x+<frac><numer>1</numer><denom>y</denom></frac>+z
</denom>
</frac>
<br />
Let's try with a continued fraction. π =
<frac>
<numer>4</numer>
<denom> 1 +
<frac>
<numer>1<sup>2</sup></numer>
<denom> 3 +
<frac>
<numer>2<sup>2</sup></numer>
<denom> 5 +
<frac>
<numer>3<sup>2</sup></numer>
<denom> 7 + ...
</denom>
</frac>
</denom>
</frac>
</denom>
</frac>
</denom>
</frac>. Looks kinda awkward without bracketing...于 2021-03-29T05:55:13.727 回答
0
我发现这对我有用
因为当分母较长时我需要排队，当分子较长时我需要排队，我像这样更改了上面的一些代码（johnatan lin）。当分子较长时，分子使用类分子，分母较长时不使用类，分子不要使用类，分母使用类分母。
CSS 样式
.fraction {
display: inline-flex;
flex-direction: column;
padding: 1em;
align-items: center;
}
.numerator {
border-bottom: 2px solid grey;
}
.denominator {
border-top: 2px solid grey;
}
html代码示例
Ricavi Numero di coperti.fraction {
display: inline-flex;
flex-direction: column;
padding: 1em;
align-items: center;
}
.numerator {
border-bottom: 2px solid grey;
}
.denominator {
border-top: 2px solid grey;
}<h1>A way to show fractions (not only numers)</h1>
This is what I did after different solutions found on stackoverflow.
<h2>This is with longer numerator</h2>
<div class="fraction">
<div class='numerator'>Longer than the other one</div>
<div>Numero di coperti</div>
</div>
<h2>This is longer denominator</h2>
<div class="fraction">
<div>Ricavi</div>
<div class="denominator">Numero di coperti</div>
</div>
<p>Hello from Giovanni</p>一种缩短这些东西的方法
为了让事情进展得更快，我把这个 javascript 放在了标签之间或另一个 js 文件中。
function numeratore(num, den){
document.write("<div class='fraction'><div class='numerator'>" + num + "</div><div>" + den + "</div></div><div id='div1'></div>")
}
function denominatore(num, den){
document.write("<div class='fraction'><div>" + num + "</div><div class=\"denominator\">" + den + "</div></div><div id='div1'></div>")
}
并将其放入 html 正文
<script>
denominatore("Ricavi", "numeri di coperti")
numeratore("Costi di produzione", "Numero menu serviti")
</script>
denominatore：当分母较长时 numeratore：当分子较长时
和css，就像以前一样
这进入标签或进入
.fraction {
display: inline-flex;
flex-direction: column;
padding: 1em;
align-items: center;
}
.numerator {
border-bottom: 2px solid grey;
}
.denominator {
border-top: 2px solid grey;
}
于 2018-04-09T16:45:49.420 回答