html - adding fractions in css -

html - adding fractions in css -

i trying add together fractions using css

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

so appear in format:

1 - x

http://jsfiddle.net/kvds5/78/ works when seek add together numbers equation in sides moves left side, how can set css won't effect equation order?

html:

<span class="fraction"> <span class="top">1</span> <span class="bottom">6</span> </span>

css:

.fraction { display: inline-block; text-align: center; } .fraction, .top, .bottom { padding-left: 2px; padding-right: 2px; font-size: 11px; } .bottom { border-top: 1px solid black; display: block; }

this how did it. demo : http://jsfiddle.net/markknijboer/yqm72/1/

html css html5