Writing Text beside Fractions in html - html

Question

I previously asked this qn:How to represent fractions in html. It was about writing the numerator and denominator in html and the solution provided allows me to write fraction in the proper format.
However, I can't write text beside it. If I write text beside it, it appears together at the top or bottom. It appears below it. I want the text to appear beside it.
The code is here:
.fraction {
position: relative;
width: 1em;
font-size: 2em;
}
.numerator {
border-bottom: 2px solid black;
text-align: center;
}
.denominator {
border-right: 2px solid black;
width: 0.75em;
text-align: center;
}
<div class="fraction">
<div class="numerator">3</div>
<div class="denominator">8</div>
</div>
The text appears like this:
Is there any solution? Any solution?

Answer 1

Set .fraction class display property as inline-block.
I guess you also will have to fiddle with its vertical-align prop.

Answer 2

add these css -
.fraction {
display: inline-block;
vertical-align: top;
}
working fiddle - http://jsfiddle.net/et2Lan5k/

Answer 3

Add div word and set CSS
CSS:
.fraction {
position: relative;
width: 1em;
font-size: 2em;
}
.numerator {
border-bottom: 2px solid black;
text-align: center;
}
.denominator {
width: 0.75em;
text-align: center;
}
.word{
position:absolute;
top:0px;
line-height:2.5em;
left:1em;
}
HTML:
<div class="fraction">
<div class="numerator">3</div>
<div class="denominator">8</div>
<div class="word">HI</div>
</div>
https://jsfiddle.net/e9nc6gna/1/

Answer 4

This can be achieved with just a few lines of code :
Wrap the numerator and denominator within <span> tags.
Wrap them again within a container <span>.
Then declare the container inline-block, so that it stays on a single line.
Declare the vertical-align: middle property for the container.
Add a border at the bottom of the numerator (or at the top of the denominator) so that it looks like a fraction.
Use this code :
* {
font-size: 50px;
}
.container {
vertical-align: middle;
display: inline-block;
}
.numerator {
border-bottom: 1px solid;
}
33<span class="container"><span class="numerator">1</span><br><span>3</span></span>
Also, do not put line breaks in between these tags, otherwise, there would be unnecessary spaces within the fraction, since the <span> tags are declared as inline elements.

Answer 5

Use this code if you wish.
<style type="text/css">
frac {
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.001em;
text-align: center;
}
frac num { /*Numerator*/
display: block;
padding: 0.01em;
}
frac den { /*Denominator*/
border-top: thin solid black;
/* Above line is for the division line. */
}
</style>
<p>33<frac><num>1</num><den>3</den></frac> sss</p>
If you want to change font-size, then add a font-size tag inside the frac tag.