如何在CSS/JavaScript中显示带有水平线的"经典"组合分数？

Question

我有一小部分,我想整齐,漂亮地展示它.

例如

4/5

将会

4
-
5

我已经看过这个,虽然这个解决方案很不错,但问题在于将4和5放在同一条直线上,并用传统的分数将它们分开.

任何黑客或解决方案都是可以接受的.不一定是CSS,Javascript或任何其他语言是可以接受的

Answer 1

用这个

<sup>6</sup>/<sub>7</sub>?

DEMO

直线

HTML

<div class="top">2</div><div class="bottom">6</div>?

CSS

.top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

演示2

Answer 2

.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 font-size以使其达到您想要的大小

Answer 3

如果您乐意使用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 class="fraction">1/2</span>
<span class="fraction">3/4</span>
<span class="fraction">1/32</span>
<span class="fraction">77/102</span>

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/