How to display "Classic" built-up fractions with an horizontal line in CSS / JavaScript?

Question

I have a fraction and I want to display it neatly and nicely.

For example

4/5 

would be

 4
 —
 5

I have looked at this and while this solution is decent the problem lies in having the 4 and the 5 in the same line with a straight line separating them as in traditional fractions.

Any hack or solution would be acceptable. Not necessarily CSS, Javascript or any other language is acceptable.

Answer 1

Use this

<sup>6</sup>/<sub>7</sub>​ 

DEMO

---

For straight line

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} 

​DEMO 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

Change .fraction font-size to get it to a size you want