如何在CSSJavaScript中用水平线显示“经典”组合分数？

如何在CSS / JavaScript中用水平线显示“经典”组合分数？

如果您乐于使用JQuery并希望最大程度地减少需要添加的标记，则可以使用以下方法：

CSS

.fraction, .top, .bottom {    padding: 0 5px;    }.fraction {    display: inline-block;    text-align: center;    }.bottom{    border-top: 1px solid #000;    display: block;}

HTML

<span >1/2</span><span >3/4</span><span >1/32</span><span >77/102</span>

jQuery查询

$('.fraction').each(function(key, value) {    $this = $(this)    var split = $this.html().split("/")    if( split.length == 2 ){        $this.html(' <span >'+split[0]+'</span> <span >'+split[1]+'</span>        ')    }    });