html/css простой двухстрочный / двухстрочный элемент

Question

Извините, мне сложно найти через поиск

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

Где X и Y - числа от 0 до 100; Как правильно сложить X поверх Y, как дробь? РЕДАКТИРОВАТЬ: это пример, разметка может быть добавлена ​​/ изменена.

Answer 1

Попробуй это:

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

Выход:

^X⁄_Y

Ссылка: http://changelog.ca/log/2008/07/01/writing_fractions_in_html

Answer 2

Вы можете поместить одно число вертикально над другим, но вам нужно использовать CSS в тандеме.

Объявить в HTML:

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

Тогда 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;
}

Диапазон позволяет тексту, представленному в html для клиента без CSS. Надеюсь, это поможет вам.