我如何编写使用HTML / CSS / jQuery的一个复杂的几分之几？(How can I wr

我希望能够写使用HTML / CSS / jQuery的一小部分（而不是使用TeX的渲染，甚至MATHML）。 目前有写简单的分数，如果你只是在分子和分母都一个术语，它的工作原理很大的解决办法，但一旦你开始使用一个以上来看，它看起来相当可怕。 作为一个例子，使用：

<sup><font size=-2>x<sup>2</sup> + 3x + 5</font></sup>/<sub><font size=-2>2x</font></sub>

生产...

^{×2 + 3×+ _5/2×}

我想是一个美丽的水平线来定义的分数，而不是一个反斜杠。 我已经尝试使用div标签与border-bottom正因为如此，但输出仍然是相当可怕：

  <div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div>
  <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div>

生产...

我正在寻找的是一个HTML / CSS / jQuery的分数是......

• 具有容易辨别水平线跨越最长分子或分母的宽度;
• 与当前文本内联的（它可以稍微超过文本的行高，但我不希望它绽放出它的接缝）; 和
• （不是真的有必要，但一个不错的顶部樱桃）斜体字母（不是数字或支架）。

可以这样做？ 怎么样？ 谢谢！

Answer 1:

好吧，我发现了一个更好的方式做你在做什么。 没有多余的CSS，只是一些表格魔力。

<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
</tr>
</table>

表自动居中对齐：d

有关详细的文本，添加更多<td>秒。 保持文本的<td> S和MATH- <td>小号分离。 添加另一个<tr>为一个新行。

<table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
<tr>
<td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
    <div style="font-size:small;text-align:center;">2x</div>
  </div></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
</table>

Answer 2:

试试这个： http://www.mathjax.org/

它使用了在https://mathoverflow.net/

Answer 3:

这是LaTeX的是。 这里是一个jQuery插件，这似乎有一个很好的实现： http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

Answer 4:

我个人建议MathJax 。 （它采用HTML / CSS）

但是，如果你不希望诉诸TeX的渲染器，那么你可能要调查与Chrome检查一个MathJax分数背后的CSS。

进入这个答案我的 ， 按Ctrl - Shift键 - 我 （在Chrome），使用巡视放大镜上的分数。 然后检查了在sidepane的CSS。

Answer 5:

我做了一个快速的jsfiddle

我不知道你的意思很什么，当你说div S和border已经指出来看看可怕，监守我的解决方案是非常相似的。

它只是使用span S和border秒。

它并不完美：文没有得到居中对齐，但它是一个不错的快速替代TeX的渲染器。

文章来源: How can I write a complex fraction using HTML/CSS/jQuery?