html/css simple two-row / two-line element

Question

Sorry, this is tricky for me to find through search

<div>
    <??> 
        <??> Question </??>   <??> X Y <??>
    </??>
    <button> Answer 1</button>
    <button> Answer 2</button>
    <button> Answer 3</button>
</div>

Where X and Y are numbers from 0 to 100; How to stack X on top of Y like a fraction, in good way? EDIT: It's example, markup can be added/changed.

`X
Y`…? Is the solution restricted to modifying the `??` parts? If so, why? — deceze, Mar 22 '18 at 12:16
Possible duplicate of [How to write fraction value using html?](https://stackoverflow.com/questions/7525977/how-to-write-fraction-value-using-html) — Mehravish Temkar, Mar 22 '18 at 12:44

Mehravish Temkar · Answer 1 · 2018-03-22T12:37:53.787

9

Try this:

<sup>X</sup>&frasl;<sub>Y</sub>

Output:

^X⁄_Y

Reference: http://changelog.ca/log/2008/07/01/writing_fractions_in_html

edited Mar 22 '18 at 12:37

answered Mar 22 '18 at 12:18

Mehravish Temkar

4,275
3
25
44

score 0 · Answer 2 · answered Mar 22 '18 at 12:27

You can place one number vertically over the other but you need to use CSS in tandem.

Declare in HTML:

<p>1 <span class="frac"><sup>X</sup><span>/</span><sub>Y</sub></span>.</p>

Then CSS:

span.frac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}

The span allows the text rendered in html for the client without CSS. Hope this can help you.

html/css simple two-row / two-line element

2 Answers2