如何使用HTML / CSS / jQuery编写复杂的分数？
我希望能够使用HTML / CSS / jQuery编写一个分数（而不是使用TeX渲染器甚至是MathML）。 目前有一个很好的解决方法来编写简单的分数，如果你只有一个分子和分母的术语 ，但是一旦你开始使用多个术语，它看起来相当可怕。 例如，使用：
x2 + 3x + 5/2x
生产…
x 2 + 3x + 5 / 2x
我想要的是一条漂亮的水平线来定义分数而不是反斜杠。 我已经尝试过使用带有border-bottom div标签，但输出仍然非常糟糕：
Substitute 4 for 'x' in the equation: x2 + 3x + 5 2x
生产…
我正在寻找的是HTML / CSS / jQuery分数……
- 有一条易于辨别的水平线，横跨最长的分子或分母的宽度;
- 与当前文本一致显示（它可能略微超过文本的行高，但我不希望它突然出现它的接缝）; 和
- （不是真的有必要，但顶部有一个漂亮的樱桃）斜体字母（不是数字或括号）。
可以这样做吗？ 怎么样？ 谢谢！
好吧，我找到了一个更好的方法去做你正在做的事情。 没有额外的CSS，只是一些表格魔术。
Substitute 4 for 'x' in the equation: x2 + 3x + 5 2x
表自动居中对齐：D
有关更多文字，请添加更多
。 保持text-
和math-
分开。 为新行添加另一个
。
Substitute 4 for 'x' in the equation: x2 + 3x + 5 2x . If you feel bored, solve this as well: y2 + 3x+5y5 + 5 1000 Substitute 4 for 'x' in the equation: x2 + 3x + 5 2x . If you feel bored, solve this as well: y2 + 3x+5y5 + 5 1000
试试这个： http ： //www.mathjax.org/
它在https://mathoverflow.net/上使用
这就是LaTeX的用途。 这是一个jQuery插件，似乎有一个很好的实现： http ： //blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html
我个人建议使用MathJax 。 （它使用HTmL / CSS）
但是，如果您不想使用TeX渲染器，那么您可能需要使用Chrome Inspector调查MathJax分数背后的CSS。
转到我的这个答案 ， Ctrl – Shift – I （在Chrome中），在分数上使用检查器放大镜。 然后查看侧窗内的CSS。
我做了一个快速的小提琴
当你说div和border使它看起来很糟糕时，我不太清楚你的意思，因为我的解决方案非常相似。
它只使用span s和border s。
它并不完美：文本没有与中心对齐，但它是TeX渲染器的一个很好的快速替代品。