html - 创建类似于分数的元素的最佳方法？

Question

我尝试了很多方法，包括以下方法：

<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
  <tbody>
    <tr><td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td></tr>
    <tr><td style="text-align: center; padding: 5px;">5</td></tr>
  </tbody>
</table>

和

<span class="fraction">
    <span>5</span>
    <span>3</span>
</span>
<style type="text/css">
.fraction{
    display:inline-block;
    vertical-align:middle;
}
.fraction>span{
    display:block;
}
.fraction>span:first-child{
    border-bottom:1px solid black;
}
</style>

所以我想知道，有没有更好的方法使用更少的元素？（例如，第一个使用table, tbody, 2 trs & 2 tds）

Answer 1

如果布局不必完全垂直：

<sup>1</sup>&frasl;<sub>10</sub>

这将产生：¹ ⁄ ₁₀

如果它必须是垂直的：

您的解决方案是我认为最好的解决方案之一。

如果你想有一个简单的方法来写分数：

例如，您可以使用 Javascript 库http://www.mathjax.org/或http://mathscribe.com/author/jqmath.html。

如果你想看起来像维基百科：

使用由 TeX 发行版生成的图像 :)