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

【问题标题】：how to put a span under another one, in order to write simple math?如何将一个跨度放在另一个跨度下，以便编写简单的数学？
【发布时间】：2013-12-23 18:58:59
【问题描述】：

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

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

我只想写max_x f(x)，在max 下加上x。

 还不够。因为，它仍然把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 宽度相同的空格。

你有什么想法吗？

【问题讨论】：

标签： html css

【解决方案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级别的复杂公式

【讨论】：

您还可以通过调整 right 值 jsfiddle.net/d8sQD/1 来拉近 f(x)

【解决方案2】：

你也可以检查一下，我不确定，如果你想要这样的东西：

maxf(x) x

【讨论】：

【解决方案3】：

这是使用定位的另一种方法。对于这个标记

<span class="frac">max
    <span>x</span>
</span>
f(x)

这样做：

.frac { display:inline-table; text-align:center; }
.frac span { display:table-row; }

见http://jsfiddle.net/97r9m/

【讨论】：