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 发行版生成的图像 :)