html - 如何将跨度放在另一个跨度下，以便编写简单的数学？

Question

我想用 html 写一些简单的数学。

Mathjax 太重了，看起来有点矫枉过正。 Mathml 似乎与 chrome 和 ie 不兼容。

我只想写max_x f(x) x 在 max 下.

<sub>是不足够的。因为，它仍然放x在 max 前, 不完全在它下面。

到目前为止我最好的尝试是:

<span>max
    <span style="position: relative;left:-1em;vertical-align: -.8em;font-size:smaller">x</span>
</span>
f(x)

它“有点”有效，但是，它在 max 之间引入了一个空格和 f(x)其宽度与 x 相同.

你有什么想法吗？

Answer 1

不确定您期望的输出是什么，但您需要这样的输出吗？所以在这里，我只是使用 position: relative; 作为父元素，而不是将 f(x) 设置为 position: absolute; 但只要确保你有一个 position: relative; 容器...

Demo

div {
    text-align: center;
    width: 100px;
    display: inline-block;
    position: relative;
}

span {
    position: absolute;
    right: 0;
    top: 30%;
}

你可以制作this复杂公式的水平