html - 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